Aqua Buttons.swift

//
//  ContentView.swift
//  Aqua Button
//
//  Created by Yohey Kuwa on 2023/11/24.
//

import SwiftUI

struct Aqua_Capsule: View{
    var elements = AquaElements()
    
    var text: String
    var aquaColor: Color
    
    var body: some View{
        GeometryReader{geo in
            //padding for edge
            let edgePadding = elements.edgePadding(geo.size)
            
            ZStack{
                //base color
                Capsule()
                    .foregroundStyle(aquaColor)
                    .shadow(radius: edgePadding*2)
                
                ZStack{
                    //light gradient
                    Capsule()
                        .foregroundStyle(elements.lightGradient)
                        .blur(radius: edgePadding)
                    
                    //padding for highlight
                    let hlPadding = elements.hlPadding(geo.size)
                    
                    //Button text
                    Text(text)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundStyle(elements.textColor)
                        .padding()
                        .shadow(radius: hlPadding/2)
                    
                    //highlight
                    Capsule()
                        .foregroundStyle(elements.hlGradient)
                        .padding(hlPadding)
                        .offset(y: -hlPadding+edgePadding*2)
                        .blur(radius: edgePadding/4)
                        //.scaleEffect(x: 1.2)
                }
                .padding(edgePadding)
            }
        }
    }
}

struct Aqua_Circle: View{
    var elements = AquaElements()
    
    var symbolName: String
    var aquaColor: Color
    
    var body: some View{
        GeometryReader{geo in
            //padding for edge
            let edgePadding = elements.edgePadding(geo.size)
            
            ZStack{
                //base color
                Circle()
                    .foregroundStyle(aquaColor)
                    .shadow(radius: edgePadding*2)
                
                ZStack{
                    //light gradient
                    Circle()
                        .foregroundStyle(elements.lightGradient)
                        .blur(radius: edgePadding)
                    
                    //padding for highlight
                    let hlPadding = elements.hlPadding(geo.size)
                    
                    //Symbol
                    Image(systemName: symbolName)
                        .resizable()
                        .scaledToFit()
                        .frame(width: geo.size.width/2)
                        .foregroundStyle(elements.textColor)
                        .shadow(radius: hlPadding/2)
                    
                    //highlight
                    Circle()
                        .foregroundStyle(elements.hlGradient)
                        .padding(hlPadding)
                        .scaleEffect(x: 1.2)
                        .offset(y: -hlPadding+edgePadding)
                        .blur(radius: edgePadding/4)
                }
                .padding(edgePadding)
            }
        }
    }
}

class AquaElements{
    let hlGradient = LinearGradient(gradient: Gradient(colors: [.white.opacity(0.95), .white.opacity(0.3), .white.opacity(0)]), startPoint: .top, endPoint: .bottom)
    
    let lightGradient = LinearGradient(gradient: Gradient(colors: [.white.opacity(0.15), .white.opacity(0.2),  .white.opacity(0.75)]), startPoint: .top, endPoint: .bottom)
    
    let textColor = Color.black.opacity(0.65)
    
    func edgePadding(_ size: CGSize) -> CGFloat {
        return size.height/50
    }
    
    func hlPadding(_ size: CGSize) -> CGFloat {
        return size.height/5
    }
}