Sone

Visual Styling

Colors, gradients, shadows, and visual effects in Sone

Visual Styling

Sone provides comprehensive styling capabilities including colors, gradients, shadows, borders, and visual effects to create beautiful, professional layouts.

Colors

Color Values

Sone supports multiple color formats:

import { Text } from "sone";

// Named colors
Text("Red text").color("red")
Text("Blue background").bg("blue")

// Hex colors
Text("Custom hex").color("#3498db")
Text("With alpha").color("#3498dbaa")

// RGB/RGBA
Text("RGB color").color("rgb(52, 152, 219)")  
Text("With transparency").color("rgba(52, 152, 219, 0.8)")

// HSL/HSLA  
Text("HSL color").color("hsl(204, 70%, 53%)")
Text("HSL with alpha").color("hsla(204, 70%, 53%, 0.9)")

// Transparent
Text("Invisible text").color("transparent")

Built-in Color Names

Sone includes common CSS color names:

Text("Examples")
  .color("black")      // Standard colors: black, white, red, green, blue, etc.
  .bg("lightgray")     // Extended colors: lightgray, darkblue, etc.

Backgrounds

Solid Backgrounds

import { Column, Text } from "sone";

Column(
  Text("White on blue").color("white")
)
.bg("blue")
.padding(20)

Multiple Backgrounds

Layer multiple backgrounds:

Column(content)
  .bg("red", "blue", "green")  // First background is topmost

Gradients

Linear Gradients

Create smooth color transitions:

// Basic gradient
Column(content)
  .bg("linear-gradient(to right, red, blue)")

// With multiple stops  
Column(content)
  .bg("linear-gradient(45deg, red 0%, yellow 50%, blue 100%)")

// Complex gradients
Column(content)
  .bg("linear-gradient(135deg, #667eea 0%, #764ba2 100%)")

Gradient Directions

// Named directions
.bg("linear-gradient(to top, red, blue)")
.bg("linear-gradient(to bottom, red, blue)")
.bg("linear-gradient(to left, red, blue)")  
.bg("linear-gradient(to right, red, blue)")
.bg("linear-gradient(to top right, red, blue)")

// Angle directions (in degrees)
.bg("linear-gradient(0deg, red, blue)")    // Bottom to top
.bg("linear-gradient(90deg, red, blue)")   // Left to right  
.bg("linear-gradient(180deg, red, blue)")  // Top to bottom
.bg("linear-gradient(270deg, red, blue)")  // Right to left

Text Gradients

Apply gradients to text:

import { Text } from "sone";

Text("Gradient Text")
  .size(48)
  .color("linear-gradient(45deg, #ff6b6b, #4ecdc4)")
  .weight("bold")

Borders

Border Width

// All sides
Column(content).borderWidth(2)

// Individual sides  
Column(content)
  .borderWidth(2, 4, 2, 4)  // top, right, bottom, left

// Shorthand variations
Column(content).borderWidth(2, 4)    // top/bottom, left/right
Column(content).borderWidth(2, 4, 6) // top, left/right, bottom

// Individual border methods
Column(content)
  .borderTopWidth(1)
  .borderRightWidth(2) 
  .borderBottomWidth(3)
  .borderLeftWidth(4)

Border Colors

Column(content)
  .borderWidth(2)
  .borderColor("red")

// Gradient borders (advanced)
Column(content)
  .borderWidth(3)  
  .borderColor("linear-gradient(45deg, red, blue)")

Border Radius

Create rounded corners:

// All corners
Column(content).rounded(10)
Column(content).borderRadius(10)

// Individual corners
Column(content).rounded(10, 5, 15, 20)  // top-left, top-right, bottom-right, bottom-left

// Circular shape
Column(content)
  .size(100)
  .rounded(50)  // Half the width/height

Corner Smoothing

Apply iOS-style corner smoothing:

Column(content)
  .rounded(20)
  .cornerSmoothing(0.6)  // 0.0 = sharp, 1.0 = maximum smoothing

Corner Styles

Choose between different corner styles:

Column(content)
  .rounded(15)
  .corner("round")  // "round" (default) or "cut"

Shadows

Drop Shadows

Add depth with shadows:

// CSS-style shadows
Column(content)
  .shadow("2px 2px 4px rgba(0,0,0,0.3)")

// Multiple shadows
Column(content)  
  .shadow(
    "0 1px 3px rgba(0,0,0,0.12)",
    "0 1px 2px rgba(0,0,0,0.24)"
  )

// Advanced shadow with spread
Column(content)
  .shadow("0 4px 6px -1px rgba(0,0,0,0.1)")

Text Shadows

Apply shadows to text:

Text("Shadow Text")
  .size(32)
  .color("white")
  .dropShadow("2px 2px 4px rgba(0,0,0,0.8)")

Common Shadow Patterns

// Subtle card shadow
.shadow("0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)")

// Medium elevation
.shadow("0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)")

// High elevation  
.shadow("0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)")

// Colored shadows
.shadow("0 4px 8px rgba(255,0,0,0.3)")  // Red shadow

// Inset shadows (for pressed effect)
.shadow("inset 0 2px 4px rgba(0,0,0,0.3)")

Visual Effects

Opacity

Control transparency:

Column(content)
  .opacity(0.8)    // 0.0 = completely transparent, 1.0 = opaque

Text("Faded text")
  .color("black")
  .opacity(0.6)

Filters

Apply CSS-style filters:

Column(content)
  .blur(5)           // Blur effect in pixels
  .brightness(1.2)   // 1.0 = normal, 2.0 = twice as bright
  .contrast(1.5)     // 1.0 = normal  
  .grayscale(0.5)    // 0.0 = full color, 1.0 = full grayscale
  .saturate(1.3)     // 1.0 = normal saturation
  .sepia(0.8)        // 0.0 = no sepia, 1.0 = full sepia
  .invert(0.2)       // 0.0 = normal, 1.0 = fully inverted
  .huerotate(90)     // Hue rotation in degrees

Transforms

Apply geometric transformations:

Column(content)
  .rotate(15)           // Rotation in degrees
  .scale(1.2)          // Uniform scaling  
  .scale(1.5, 0.8)     // Scale X and Y separately
  .translateX(20)      // Move horizontally
  .translateY(-10)     // Move vertically

Advanced Styling

Background Images

Use images as backgrounds:

import { Photo, Column } from "sone";

Column(content)
  .bg(Photo("background.jpg"))
  .color("white")

Complex Compositions

Combine multiple styling techniques:

function StylishCard(title, content) {
  return Column(
    Text(title)
      .size(24)
      .weight("bold")
      .color("white")
      .dropShadow("1px 1px 2px rgba(0,0,0,0.5)"),
      
    Text(content)
      .size(16) 
      .color("white")
      .opacity(0.9)
  )
  .padding(30)
  .bg("linear-gradient(135deg, #667eea 0%, #764ba2 100%)")
  .rounded(15)
  .cornerSmoothing(0.6)
  .shadow("0 8px 16px rgba(102, 126, 234, 0.3)")
  .rotate(2);
}

Practical Examples

Modern Button

function ModernButton(text) {
  return Text(text)
    .size(16)
    .weight("600")
    .color("white")
    .padding(15, 30)
    .bg("linear-gradient(135deg, #667eea 0%, #764ba2 100%)")
    .rounded(25)
    .shadow("0 4px 8px rgba(102, 126, 234, 0.3)")
    .cursor("pointer");
}

Glass Effect Card

function GlassCard(content) {
  return Column(content)
    .padding(30)
    .bg("rgba(255, 255, 255, 0.1)")
    .rounded(20)
    .shadow("0 8px 32px rgba(31, 38, 135, 0.37)")
    .borderWidth(1)
    .borderColor("rgba(255, 255, 255, 0.18)")
    .backdrop-filter("blur(4px)");  // CSS backdrop filter
}

Neon Text Effect

function NeonText(text) {
  return Text(text)
    .size(48)
    .weight("bold")  
    .color("#fff")
    .dropShadow(
      "0 0 5px #00ffff",
      "0 0 10px #00ffff", 
      "0 0 15px #00ffff",
      "0 0 20px #00ffff"
    )
    .bg("black")
    .padding(20);
}

Card with Hover Effect

function InteractiveCard(title, content) {
  return Column(
    Text(title).size(18).weight("bold").marginBottom(10),
    Text(content).size(14).color("gray")
  )
  .padding(25)
  .bg("white")
  .rounded(12)
  .shadow("0 2px 4px rgba(0,0,0,0.1)")
  .borderWidth(1)
  .borderColor("transparent")
  // Hover state would be handled by interaction system
  .transition("all 0.3s ease");
}

Gradient Border

function GradientBorder(content) {
  // Create gradient border effect using nested containers
  return Column(
    Column(content)
      .padding(2)
      .bg("linear-gradient(45deg, #ff6b6b, #4ecdc4)")
      .rounded(12),
      
    Column(content)
      .padding(20)
      .bg("white") 
      .rounded(10)
  );
}

Material Design Elevation

function MaterialCard(content, elevation = 2) {
  const shadows = {
    1: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
    2: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)", 
    3: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
    4: "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
    5: "0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)"
  };
  
  return Column(content)
    .padding(20)
    .bg("white")
    .rounded(4)
    .shadow(shadows[elevation] || shadows[2]);
}

Best Practices

Color Usage

  • Use consistent color palettes throughout your designs
  • Ensure sufficient contrast for text readability
  • Consider accessibility when choosing color combinations
  • Test colors in different lighting conditions

Performance

  • Use solid colors instead of gradients when possible for better performance
  • Limit the number of shadows per element
  • Optimize filter usage, especially blur effects

Visual Hierarchy

  • Use shadows to establish depth and layering
  • Apply consistent border radius values for cohesive design
  • Use opacity and colors to create visual hierarchy

Responsive Design

  • Test shadow effects at different scales
  • Consider how gradients and effects look on different output sizes
  • Use relative units where appropriate for scalable designs

Layout System

Understanding flexbox layouts and positioning in Sone

Images & Graphics

Working with photos, SVG paths, and custom graphics in Sone