swift-html/Sources/HTML/DarkModeColor.swift at main · swift-foundations/swift-html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import CSS
import CSS_Standard

@available(*, deprecated, renamed: "DarkModeColor")
public typealias HTMLColor = DarkModeColor

extension DarkModeColor {
    private typealias sRGB = IEC_61966.`2`.`1`.sRGB

    public static func gradientMidpoint(
        from color1: DarkModeColor,
        to color2: DarkModeColor
    ) -> DarkModeColor? {
        func midpoint(
            _ c1: CSS_Standard.Color.Value,
            _ c2: CSS_Standard.Color.Value
        ) -> CSS_Standard.Color.Value? {
            guard let srgb1 = sRGB(c1), let srgb2 = sRGB(c2) else { return nil }

            let midR = (srgb1.r255 + srgb2.r255) / 2
            let midG = (srgb1.g255 + srgb2.g255) / 2
            let midB = (srgb1.b255 + srgb2.b255) / 2

            return .rgb(red: midR, green: midG, blue: midB)
        }

        let lightMid = midpoint(color1.light, color2.light)
        let darkMid = midpoint(color1.dark, color2.dark)

        guard let light = lightMid, let dark = darkMid else { return nil }
        return DarkModeColor(light: light, dark: dark)
    }

    public static func readablePrimaryColor(on backgroundColor: DarkModeColor) -> Self {
        guard let srgb = sRGB(backgroundColor.light) else {
            return .init(.hex("000000"))
        }

        let brightness =
            (Double(srgb.r255) * 299 + Double(srgb.g255) * 587 + Double(srgb.b255) * 114) / 255000
        let color: CSS_Standard.Color.Value = brightness > 0.5 ? .hex("000000") : .hex("FFFFFF")
        return .init(color)
    }
}

extension HTML.View {

    public func gradient(
        bottom: DarkModeColor,
        top: DarkModeColor
    ) -> some HTML.View {
        self
            .css
            .inlineStyle(
                "background",
                "linear-gradient(0deg, \(bottom.light.description) 0%, \(top.light.description) 100%);"
            )
            .dark {
                $0.inlineStyle(
                    "background",
                    "linear-gradient(0deg, \(bottom.dark.description) 0%, \(top.dark.description) 100%);"
                )
            }
    }

    public func gradient(
        bottom: DarkModeColor,
        middle: DarkModeColor,
        top: DarkModeColor
    ) -> some HTML.View {
        self
            .css
            .inlineStyle(
                "background",
                "linear-gradient(0deg, \(bottom.light.description) 0%, \(middle.light.description) 50%, \(top.light.description) 100%);"
            )
            .dark {
                $0.inlineStyle(
                    "background",
                    "linear-gradient(0deg, \(bottom.dark.description) 0%, \(middle.dark.description) 50%, \(top.dark.description) 100%);"
                )
            }
    }
}