275 lines
No EOL
7.1 KiB
TOML
275 lines
No EOL
7.1 KiB
TOML
# Design System Configuration
|
|
# Comprehensive design tokens for full abstraction
|
|
|
|
[metadata]
|
|
name = "Design System"
|
|
description = "Complete design system with full abstraction for colors, spacing, typography, and components"
|
|
version = "2.0.0"
|
|
author = "Rustelo Contributors"
|
|
|
|
# Responsive breakpoints (mobile-first)
|
|
[breakpoints]
|
|
xs = "320px" # Extra small mobile
|
|
sm = "640px" # Small mobile/large mobile
|
|
md = "768px" # Tablet portrait
|
|
lg = "1024px" # Tablet landscape/small desktop
|
|
xl = "1280px" # Desktop
|
|
xxl = "1536px" # Large desktop
|
|
|
|
# Color system with semantic meaning
|
|
[colors]
|
|
# Brand colors
|
|
brand_primary = "#3b82f6"
|
|
brand_secondary = "#6366f1"
|
|
brand_accent = "#f59e0b"
|
|
|
|
# Semantic colors - light theme
|
|
success = "#10b981"
|
|
warning = "#f59e0b"
|
|
error = "#ef4444"
|
|
info = "#06b6d4"
|
|
|
|
# Neutral scale - light theme
|
|
neutral_50 = "#f9fafb"
|
|
neutral_100 = "#f3f4f6"
|
|
neutral_200 = "#e5e7eb"
|
|
neutral_300 = "#d1d5db"
|
|
neutral_400 = "#9ca3af"
|
|
neutral_500 = "#6b7280"
|
|
neutral_600 = "#4b5563"
|
|
neutral_700 = "#374151"
|
|
neutral_800 = "#1f2937"
|
|
neutral_900 = "#111827"
|
|
neutral_950 = "#030712"
|
|
|
|
# Dark theme colors
|
|
[colors.dark]
|
|
# Brand colors (same as light for consistency)
|
|
brand_primary = "#60a5fa"
|
|
brand_secondary = "#818cf8"
|
|
brand_accent = "#fbbf24"
|
|
|
|
# Semantic colors - dark theme
|
|
success = "#34d399"
|
|
warning = "#fbbf24"
|
|
error = "#f87171"
|
|
info = "#22d3ee"
|
|
|
|
# Neutral scale - dark theme (inverted)
|
|
neutral_50 = "#030712"
|
|
neutral_100 = "#111827"
|
|
neutral_200 = "#1f2937"
|
|
neutral_300 = "#374151"
|
|
neutral_400 = "#4b5563"
|
|
neutral_500 = "#6b7280"
|
|
neutral_600 = "#9ca3af"
|
|
neutral_700 = "#d1d5db"
|
|
neutral_800 = "#e5e7eb"
|
|
neutral_900 = "#f3f4f6"
|
|
neutral_950 = "#f9fafb"
|
|
|
|
# Typography system
|
|
[typography]
|
|
# Font families
|
|
font_sans = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
|
|
font_serif = "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif"
|
|
font_mono = "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace"
|
|
|
|
# Font sizes (mobile-first)
|
|
text_xs = "0.75rem" # 12px
|
|
text_sm = "0.875rem" # 14px
|
|
text_base = "1rem" # 16px
|
|
text_lg = "1.125rem" # 18px
|
|
text_xl = "1.25rem" # 20px
|
|
text_2xl = "1.5rem" # 24px
|
|
text_3xl = "1.875rem" # 30px
|
|
text_4xl = "2.25rem" # 36px
|
|
text_5xl = "3rem" # 48px
|
|
text_6xl = "3.75rem" # 60px
|
|
|
|
# Font weights
|
|
font_thin = "100"
|
|
font_light = "300"
|
|
font_normal = "400"
|
|
font_medium = "500"
|
|
font_semibold = "600"
|
|
font_bold = "700"
|
|
font_extrabold = "800"
|
|
font_black = "900"
|
|
|
|
# Line heights
|
|
leading_none = "1"
|
|
leading_tight = "1.25"
|
|
leading_snug = "1.375"
|
|
leading_normal = "1.5"
|
|
leading_relaxed = "1.625"
|
|
leading_loose = "2"
|
|
|
|
# Spacing system
|
|
[spacing]
|
|
# Base spacing scale
|
|
space_0 = "0"
|
|
space_px = "1px"
|
|
space_0_5 = "0.125rem" # 2px
|
|
space_1 = "0.25rem" # 4px
|
|
space_1_5 = "0.375rem" # 6px
|
|
space_2 = "0.5rem" # 8px
|
|
space_2_5 = "0.625rem" # 10px
|
|
space_3 = "0.75rem" # 12px
|
|
space_3_5 = "0.875rem" # 14px
|
|
space_4 = "1rem" # 16px
|
|
space_5 = "1.25rem" # 20px
|
|
space_6 = "1.5rem" # 24px
|
|
space_7 = "1.75rem" # 28px
|
|
space_8 = "2rem" # 32px
|
|
space_9 = "2.25rem" # 36px
|
|
space_10 = "2.5rem" # 40px
|
|
space_11 = "2.75rem" # 44px
|
|
space_12 = "3rem" # 48px
|
|
space_14 = "3.5rem" # 56px
|
|
space_16 = "4rem" # 64px
|
|
space_20 = "5rem" # 80px
|
|
space_24 = "6rem" # 96px
|
|
space_28 = "7rem" # 112px
|
|
space_32 = "8rem" # 128px
|
|
space_36 = "9rem" # 144px
|
|
space_40 = "10rem" # 160px
|
|
space_44 = "11rem" # 176px
|
|
space_48 = "12rem" # 192px
|
|
space_52 = "13rem" # 208px
|
|
space_56 = "14rem" # 224px
|
|
space_60 = "15rem" # 240px
|
|
space_64 = "16rem" # 256px
|
|
space_72 = "18rem" # 288px
|
|
space_80 = "20rem" # 320px
|
|
space_96 = "24rem" # 384px
|
|
|
|
# Border radius
|
|
[radius]
|
|
radius_none = "0"
|
|
radius_sm = "0.125rem" # 2px
|
|
radius_base = "0.25rem" # 4px
|
|
radius_md = "0.375rem" # 6px
|
|
radius_lg = "0.5rem" # 8px
|
|
radius_xl = "0.75rem" # 12px
|
|
radius_2xl = "1rem" # 16px
|
|
radius_3xl = "1.5rem" # 24px
|
|
radius_full = "9999px"
|
|
|
|
# Shadows
|
|
[shadows]
|
|
shadow_none = "none"
|
|
shadow_sm = "0 1px 2px 0 rgb(0 0 0 / 0.05)"
|
|
shadow_base = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
|
|
shadow_md = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
|
|
shadow_lg = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
|
|
shadow_xl = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
shadow_2xl = "0 25px 50px -12px rgb(0 0 0 / 0.25)"
|
|
shadow_inner = "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
|
|
|
|
# Z-index layers
|
|
[z_index]
|
|
z_hide = "-1"
|
|
z_auto = "auto"
|
|
z_0 = "0"
|
|
z_10 = "10"
|
|
z_20 = "20"
|
|
z_30 = "30"
|
|
z_40 = "40"
|
|
z_50 = "50"
|
|
|
|
# Component-specific configurations
|
|
[components]
|
|
|
|
# Button variants
|
|
[components.button]
|
|
border_radius = "radius_md"
|
|
font_weight = "font_medium"
|
|
transition = "all 0.2s ease-in-out"
|
|
|
|
[components.button.sizes]
|
|
sm = { padding_x = "space_3", padding_y = "space_1_5", font_size = "text_sm" }
|
|
md = { padding_x = "space_4", padding_y = "space_2", font_size = "text_sm" }
|
|
lg = { padding_x = "space_6", padding_y = "space_3", font_size = "text_base" }
|
|
|
|
[components.button.variants]
|
|
primary = { bg = "brand_primary", text = "neutral_50", hover_bg = "brand_primary" }
|
|
secondary = { bg = "neutral_200", text = "neutral_900", hover_bg = "neutral_300" }
|
|
ghost = { bg = "transparent", text = "neutral_700", hover_bg = "neutral_100" }
|
|
danger = { bg = "error", text = "neutral_50", hover_bg = "error" }
|
|
|
|
# Card component
|
|
[components.card]
|
|
background = "neutral_50"
|
|
border = "neutral_200"
|
|
border_radius = "radius_lg"
|
|
shadow = "shadow_sm"
|
|
padding = "space_6"
|
|
|
|
[components.card.dark]
|
|
background = "neutral_900"
|
|
border = "neutral_700"
|
|
|
|
# Input component
|
|
[components.input]
|
|
background = "neutral_50"
|
|
border = "neutral_300"
|
|
border_radius = "radius_md"
|
|
padding_x = "space_3"
|
|
padding_y = "space_2"
|
|
font_size = "text_sm"
|
|
focus_border = "brand_primary"
|
|
|
|
[components.input.dark]
|
|
background = "neutral_800"
|
|
border = "neutral_600"
|
|
|
|
# Navigation component
|
|
[components.nav]
|
|
background = "neutral_50"
|
|
border = "neutral_200"
|
|
link_color = "neutral_600"
|
|
link_hover = "brand_primary"
|
|
active_color = "brand_primary"
|
|
|
|
[components.nav.dark]
|
|
background = "neutral_900"
|
|
border = "neutral_700"
|
|
link_color = "neutral_400"
|
|
|
|
# Footer component
|
|
[components.footer]
|
|
background = "neutral_100"
|
|
text_color = "neutral_600"
|
|
link_color = "neutral_500"
|
|
link_hover = "brand_primary"
|
|
|
|
[components.footer.dark]
|
|
background = "neutral_800"
|
|
text_color = "neutral_400"
|
|
link_color = "neutral_500"
|
|
|
|
# Responsive design tokens
|
|
[responsive]
|
|
# Container max widths
|
|
container_sm = "640px"
|
|
container_md = "768px"
|
|
container_lg = "1024px"
|
|
container_xl = "1280px"
|
|
container_2xl = "1536px"
|
|
|
|
# Grid system
|
|
grid_columns = "12"
|
|
grid_gap = "space_6"
|
|
|
|
# Mobile-first spacing adjustments
|
|
[responsive.spacing]
|
|
mobile = { padding = "space_4", margin = "space_2" }
|
|
tablet = { padding = "space_6", margin = "space_4" }
|
|
desktop = { padding = "space_8", margin = "space_6" }
|
|
|
|
# Typography scaling
|
|
[responsive.typography]
|
|
mobile = { scale = "0.875", line_height = "1.4" }
|
|
tablet = { scale = "1", line_height = "1.5" }
|
|
desktop = { scale = "1.125", line_height = "1.6" } |