viewy 2.0.6

A web UI toolkit that combine the advantages of a design system and an ui library.
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

@mixin palette($variant) {
    @if ($variant == "dark") {
        $accent: $accent-dark;
        $on-accent: contrast-color($accent);
        $background: $background-dark;
        $on-background: contrast-color($background);
        $surface: $surface-dark;
        $themed-on-background: color.mix($on-background, $accent, $weight: 90%);
        $themed-on-accent: color.mix($on-accent, $accent, $weight: 90%);
        --dark: true;

        --color-accent: #{$accent};
        --color-accent-light: #{color.adjust($accent, $lightness: +20%)};
        --color-accent-lighter: #{color.adjust($accent, $lightness: +35%)};
        --color-on-accent: #{$on-accent};

        --color-success: #{$success-dark};
        --color-on-success: #{$on-success-dark};
        --surface-success: #{color.adjust($success-dark, $alpha: -0.9)};

        --surface: #{$surface};
        --surface-lighter: #{color.adjust($surface, $lightness: +3%)};
        --surface-dark: #{color.adjust($surface, $lightness: -2%)};
        --surface-darker: #{color.adjust($surface, $lightness: -5%)};
        --surface-blue: #{color.change(
                $accent,
                $lightness: 15%,
                $saturation: 65%
            )};
        --surface-blue-lighter: #{color.change($accent, $lightness: 3%)};
        --surface-accent-darker: #{color.change(
                $accent,
                $lightness: 20%,
                $saturation: 60%
            )};
        --surface-red: #{color.adjust($destructive-dark, $alpha: -0.9)};
        --surface-red-darker: #{color.adjust($destructive-dark, $alpha: -0.8)};
        --color-border-blue: #{color.adjust($accent, $alpha: -0.25)};
        --background: #{$background};
        --background-raised: #{color.adjust(
                $themed-on-background,
                $lightness: +85%
            )};
        --backdrop: #{color.adjust($background, $alpha: -0.3)};
        --color-text: #{$themed-on-background};
        --color-text-secondary: #{color.adjust(
                $themed-on-background,
                $lightness: -20%,
                $saturation: -70%
            )};
        --color-text-on-accent: #{$themed-on-accent};
        --color-border: #{color.adjust(
                $themed-on-background,
                $lightness: -73%,
                $saturation: -70%
            )};
        --color-border-hover: #{color.adjust(
                $themed-on-background,
                $lightness: -70%,
                $saturation: -70%
            )};
        --color-hover: #{color.adjust($themed-on-background, $alpha: -0.94)};
        --color-active: #{color.adjust($themed-on-background, $alpha: -0.9)};
        --color-focus: #{color.adjust($accent, $alpha: -0.8)};
        --color-shadow: rgba(0, 0, 0, 0.1);
        --color-destructive: #{$destructive-dark};
        --color-destructive-light: #{color.adjust(
                $destructive-dark,
                $lightness: 5%
            )};
        --color-destructive-lighter: #{color.adjust(
                $destructive-dark,
                $lightness: 10%
            )};
        --color-on-destructive: #{$on-destructive-dark};
        --color-warning: #ff6b00;
        --surface-warning: #ff62002e;
        --color-on-warning: #ff6b00;
        --color-text-disabled: #{color.mix($background, $accent, $weight: 60%)};
    } @else {
        $accent: $accent-light;
        $on-accent: contrast-color($accent);
        $background: $background-light;
        $on-background: contrast-color($background);
        $surface: $surface-light;
        $themed-on-background: color.mix($on-background, $accent, $weight: 85%);
        $themed-on-accent: color.mix($on-accent, $accent, $weight: 90%);

        --light: true;

        --color-accent: #{$accent};
        --color-on-accent: #{$on-accent};
        --color-accent-light: #{color.adjust($accent, $lightness: -15%)};
        --color-accent-lighter: #{color.adjust($accent, $lightness: -30%)};

        --color-success: #{$success-light};
        --color-on-success: #{$on-success-light};

        --surface-success: #{color.adjust($success-light, $alpha: -0.9)};

        --surface: #{$surface};
        --surface-lighter: #{color.adjust($surface, $lightness: +3%)};
        --surface-dark: #{color.adjust($surface, $lightness: -8%)};
        --surface-darker: #{color.adjust($surface, $lightness: -10%)};
        --surface-blue: #{color.change($accent, $lightness: 85%)};
        --surface-blue-lighter: #{color.change($accent, $lightness: 93%)};
        --surface-accent-darker: #{color.change($accent, $lightness: 80%)};
        --surface-red: #{color.adjust($destructive-light, $alpha: -0.9)};
        --surface-red-darker: #{color.adjust($destructive-light, $alpha: -0.8)};
        --color-on-surface: contrast-color($surface);
        --color-border-blue: #{color.adjust($accent, $alpha: -0.25)};
        --background: #{$background};
        --background-raised: #{color.adjust(
                $themed-on-background,
                $lightness: +88%
            )};
        --backdrop: #{color.adjust($themed-on-background, $alpha: -0.5)};
        --color-text: #{$themed-on-background};
        --color-text-secondary: #{color.adjust(
                $themed-on-background,
                $lightness: +20%,
                $saturation: -50%
            )};
        --color-text-on-accent: #{$themed-on-accent};
        --color-text-disabled: #{color.mix($background, $accent, $weight: 50%)};
        --color-border: #{color.adjust(
                $themed-on-background,
                $lightness: +78%,
                $saturation: -80%
            )};
        --color-border-hover: #{color.adjust(
                $themed-on-background,
                $lightness: +73%,
                $saturation: -60%
            )};
        --color-hover: #{color.adjust($themed-on-background, $alpha: -0.94)};
        --color-active: #{color.adjust($themed-on-background, $alpha: -0.9)};
        --color-focus: #{color.adjust($accent, $alpha: -0.5)};
        --color-shadow: rgba(0, 0, 0, 0.1);
        --color-destructive: #{$destructive-light};
        --color-destructive-light: #{color.adjust(
                $destructive-light,
                $lightness: 5%
            )};
        --color-destructive-lighter: #{color.adjust(
                $destructive-light,
                $lightness: 10%
            )};
        --color-on-destructive: #{$on-destructive-light};
        --color-warning: #ff6b00;
        --surface-warning: #ffe2d0;
        --color-on-warning: #792c00;
    }
}