1 /*
2  * Copyright (c) 2024 Huawei Device Co., Ltd.
3  * Licensed under the Apache License, Version 2.0 (the "License");
4  * you may not use this file except in compliance with the License.
5  * You may obtain a copy of the License at
6  *
7  *     http://www.apache.org/licenses/LICENSE-2.0
8  *
9  * Unless required by applicable law or agreed to in writing, software
10  * distributed under the License is distributed on an "AS IS" BASIS,
11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12  * See the License for the specific language governing permissions and
13  * limitations under the License.
14  */
15 
16 #ifndef FRAMEWORKS_BRIDGE_DECLARATIVE_FRONTEND_THEME_JS_THEME_H
17 #define FRAMEWORKS_BRIDGE_DECLARATIVE_FRONTEND_THEME_JS_THEME_H
18 
19 #include "bridge/declarative_frontend/jsview/js_view_abstract.h"
20 #include "core/components/common/properties/color.h"
21 
22 #define COLORS_NUMBER (51)
23 
24 #define BRAND (0)
25 #define WARNING (1)
26 #define ALERT (2)
27 #define CONFIRM (3)
28 
29 #define FONT_PRIMARY (4)
30 #define FONT_SECONDARY (5)
31 #define FONT_TERTIARY (6)
32 #define FONT_FOURTH (7)
33 #define FONT_EMPHASIZE (8)
34 
35 #define FONT_ON_PRIMARY (9)
36 #define FONT_ON_SECONDARY (10)
37 #define FONT_ON_TERTIARY (11)
38 #define FONT_ON_FOURTH (12)
39 
40 #define ICON_PRIMARY (13)
41 #define ICON_SECONDARY (14)
42 #define ICON_TERTIARY (15)
43 #define ICON_FOURTH (16)
44 #define ICON_EMPHASIZE (17)
45 #define ICON_SUB_EMPHASIZE (18)
46 
47 #define ICON_ON_PRIMARY (19)
48 #define ICON_ON_SECONDARY (20)
49 #define ICON_ON_TERTIARY (21)
50 #define ICON_ON_FOURTH (22)
51 
52 #define BACKGROUND_PRIMARY (23)
53 #define BACKGROUND_SECONDARY (24)
54 #define BACKGROUND_TERTIARY (25)
55 #define BACKGROUND_FOURTH (26)
56 #define BACKGROUND_EMPHASIZE (27)
57 
58 #define COMP_FOREGROUND_PRIMARY (28)
59 #define COMP_BACKGROUND_PRIMARY (29)
60 #define COMP_BACKGROUND_PRIMARY_TRAN (30)
61 #define COMP_BACKGROUND_PRIMARY_CONTRARY (31)
62 #define COMP_BACKGROUND_GRAY (32)
63 #define COMP_BACKGROUND_SECONDARY (33)
64 #define COMP_BACKGROUND_TERTIARY (34)
65 #define COMP_BACKGROUND_EMPHASIZE (35)
66 #define COMP_BACKGROUND_NEUTRAL (36)
67 #define COMP_EMPHASIZE_SECONDARY (37)
68 #define COMP_EMPHASIZE_TERTIARY (38)
69 #define COMP_DIVIDER (39)
70 #define COMP_COMMON_CONTRARY (40)
71 #define COMP_BACKGROUND_FOCUS (41)
72 #define COMP_FOCUSED_PRIMARY (42)
73 #define COMP_FOCUSED_SECONDARY (43)
74 #define COMP_FOCUSED_TERTIARY (44)
75 
76 #define INTERACTIVE_HOVER (45)
77 #define INTERACTIVE_PRESSED (46)
78 #define INTERACTIVE_FOCUS (47)
79 #define INTERACTIVE_ACTIVE (48)
80 #define INTERACTIVE_SELECT (49)
81 #define INTERACTIVE_CLICK (50)
82 
83 namespace OHOS::Ace::Framework {
84 class JSThemeColors {
85 public:
86     JSThemeColors() = default;
87     virtual ~JSThemeColors() = default;
88 
SetColors(const JSRef<JSArray> & colors)89     void SetColors(const JSRef<JSArray>& colors)
90     {
91         for (int i = 0; i < COLORS_NUMBER; i++) {
92             colors_.push_back(colors->GetValueAt(i));
93         }
94     }
95 
Brand()96     Color Brand() const
97     {
98         return ConvertJsValueToColor(colors_[BRAND]);
99     }
Warning()100     Color Warning() const
101     {
102         return ConvertJsValueToColor(colors_[WARNING]);
103     }
Alert()104     Color Alert() const
105     {
106         return ConvertJsValueToColor(colors_[ALERT]);
107     }
Confirm()108     Color Confirm() const
109     {
110         return ConvertJsValueToColor(colors_[CONFIRM]);
111     }
112 
FontPrimary()113     Color FontPrimary() const
114     {
115         return ConvertJsValueToColor(colors_[FONT_PRIMARY]);
116     }
FontSecondary()117     Color FontSecondary() const
118     {
119         return ConvertJsValueToColor(colors_[FONT_SECONDARY]);
120     }
FontTertiary()121     Color FontTertiary() const
122     {
123         return ConvertJsValueToColor(colors_[FONT_TERTIARY]);
124     }
FontFourth()125     Color FontFourth() const
126     {
127         return ConvertJsValueToColor(colors_[FONT_FOURTH]);
128     }
FontEmphasize()129     Color FontEmphasize() const
130     {
131         return ConvertJsValueToColor(colors_[FONT_EMPHASIZE]);
132     }
133 
FontOnPrimary()134     Color FontOnPrimary() const
135     {
136         return ConvertJsValueToColor(colors_[FONT_ON_PRIMARY]);
137     }
FontOnSecondary()138     Color FontOnSecondary() const
139     {
140         return ConvertJsValueToColor(colors_[FONT_ON_SECONDARY]);
141     }
FontOnTertiary()142     Color FontOnTertiary() const
143     {
144         return ConvertJsValueToColor(colors_[FONT_ON_TERTIARY]);
145     }
FontOnFourth()146     Color FontOnFourth() const
147     {
148         return ConvertJsValueToColor(colors_[FONT_ON_FOURTH]);
149     }
150 
IconPrimary()151     Color IconPrimary() const
152     {
153         return ConvertJsValueToColor(colors_[ICON_PRIMARY]);
154     }
IconSecondary()155     Color IconSecondary() const
156     {
157         return ConvertJsValueToColor(colors_[ICON_SECONDARY]);
158     }
IconTertiary()159     Color IconTertiary() const
160     {
161         return ConvertJsValueToColor(colors_[ICON_TERTIARY]);
162     }
IconFourth()163     Color IconFourth() const
164     {
165         return ConvertJsValueToColor(colors_[ICON_FOURTH]);
166     }
IconEmphasize()167     Color IconEmphasize() const
168     {
169         return ConvertJsValueToColor(colors_[ICON_EMPHASIZE]);
170     }
IconSubEmphasize()171     Color IconSubEmphasize() const
172     {
173         return ConvertJsValueToColor(colors_[ICON_SUB_EMPHASIZE]);
174     }
175 
IconOnPrimary()176     Color IconOnPrimary() const
177     {
178         return ConvertJsValueToColor(colors_[ICON_ON_PRIMARY]);
179     }
IconOnSecondary()180     Color IconOnSecondary() const
181     {
182         return ConvertJsValueToColor(colors_[ICON_ON_SECONDARY]);
183     }
IconOnTertiary()184     Color IconOnTertiary() const
185     {
186         return ConvertJsValueToColor(colors_[ICON_ON_TERTIARY]);
187     }
IconOnFourth()188     Color IconOnFourth() const
189     {
190         return ConvertJsValueToColor(colors_[ICON_ON_FOURTH]);
191     }
192 
BackgroundPrimary()193     Color BackgroundPrimary() const
194     {
195         return ConvertJsValueToColor(colors_[BACKGROUND_PRIMARY]);
196     }
BackgroundSecondary()197     Color BackgroundSecondary() const
198     {
199         return ConvertJsValueToColor(colors_[BACKGROUND_SECONDARY]);
200     }
BackgroundTertiary()201     Color BackgroundTertiary() const
202     {
203         return ConvertJsValueToColor(colors_[BACKGROUND_TERTIARY]);
204     }
BackgroundFourth()205     Color BackgroundFourth() const
206     {
207         return ConvertJsValueToColor(colors_[BACKGROUND_FOURTH]);
208     }
BackgroundEmphasize()209     Color BackgroundEmphasize() const
210     {
211         return ConvertJsValueToColor(colors_[BACKGROUND_EMPHASIZE]);
212     }
213 
CompForegroundPrimary()214     Color CompForegroundPrimary() const
215     {
216         return ConvertJsValueToColor(colors_[COMP_FOREGROUND_PRIMARY]);
217     }
CompBackgroundPrimary()218     Color CompBackgroundPrimary() const
219     {
220         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_PRIMARY]);
221     }
CompBackgroundPrimaryTran()222     Color CompBackgroundPrimaryTran() const
223     {
224         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_PRIMARY_TRAN]);
225     }
CompBackgroundPrimaryContrary()226     Color CompBackgroundPrimaryContrary() const
227     {
228         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_PRIMARY_CONTRARY]);
229     }
CompBackgroundGray()230     Color CompBackgroundGray() const
231     {
232         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_GRAY]);
233     }
CompBackgroundSecondary()234     Color CompBackgroundSecondary() const
235     {
236         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_SECONDARY]);
237     }
CompBackgroundTertiary()238     Color CompBackgroundTertiary() const
239     {
240         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_TERTIARY]);
241     }
CompBackgroundEmphasize()242     Color CompBackgroundEmphasize() const
243     {
244         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_EMPHASIZE]);
245     }
CompBackgroundNeutral()246     Color CompBackgroundNeutral() const
247     {
248         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_NEUTRAL]);
249     }
CompEmphasizeSecondary()250     Color CompEmphasizeSecondary() const
251     {
252         return ConvertJsValueToColor(colors_[COMP_EMPHASIZE_SECONDARY]);
253     }
CompEmphasizeTertiary()254     Color CompEmphasizeTertiary() const
255     {
256         return ConvertJsValueToColor(colors_[COMP_EMPHASIZE_TERTIARY]);
257     }
CompDivider()258     Color CompDivider() const
259     {
260         return ConvertJsValueToColor(colors_[COMP_DIVIDER]);
261     }
CompCommonContrary()262     Color CompCommonContrary() const
263     {
264         return ConvertJsValueToColor(colors_[COMP_COMMON_CONTRARY]);
265     }
CompBackgroundFocus()266     Color CompBackgroundFocus() const
267     {
268         return ConvertJsValueToColor(colors_[COMP_BACKGROUND_FOCUS]);
269     }
CompFocusedPrimary()270     Color CompFocusedPrimary() const
271     {
272         return ConvertJsValueToColor(colors_[COMP_FOCUSED_PRIMARY]);
273     }
CompFocusedSecondary()274     Color CompFocusedSecondary() const
275     {
276         return ConvertJsValueToColor(colors_[COMP_FOCUSED_SECONDARY]);
277     }
CompFocusedTertiary()278     Color CompFocusedTertiary() const
279     {
280         return ConvertJsValueToColor(colors_[COMP_FOCUSED_TERTIARY]);
281     }
282 
InteractiveHover()283     Color InteractiveHover() const
284     {
285         return ConvertJsValueToColor(colors_[INTERACTIVE_HOVER]);
286     }
InteractivePressed()287     Color InteractivePressed() const
288     {
289         return ConvertJsValueToColor(colors_[INTERACTIVE_PRESSED]);
290     }
InteractiveFocus()291     Color InteractiveFocus() const
292     {
293         return ConvertJsValueToColor(colors_[INTERACTIVE_FOCUS]);
294     }
InteractiveActive()295     Color InteractiveActive() const
296     {
297         return ConvertJsValueToColor(colors_[INTERACTIVE_ACTIVE]);
298     }
InteractiveSelect()299     Color InteractiveSelect() const
300     {
301         return ConvertJsValueToColor(colors_[INTERACTIVE_SELECT]);
302     }
InteractiveClick()303     Color InteractiveClick() const
304     {
305         return ConvertJsValueToColor(colors_[INTERACTIVE_CLICK]);
306     }
307 private:
ConvertJsValueToColor(const JSRef<JSVal> & jsValue)308     Color ConvertJsValueToColor(const JSRef<JSVal>& jsValue) const
309     {
310         Color color;
311         JSViewAbstract::ParseJsColor(jsValue, color);
312         return color;
313     }
314 
315     std::vector<JSRef<JSVal>> colors_;
316 };
317 
318 class JSTheme {
319 public:
320     JSTheme() = default;
321     virtual ~JSTheme() = default;
322 
SetColors(const JSThemeColors & colors)323     void SetColors(const JSThemeColors& colors)
324     {
325         colors_ = colors;
326     }
327 
Colors()328     const JSThemeColors& Colors() const
329     {
330         return colors_;
331     }
332 private:
333     JSThemeColors colors_;
334 };
335 
336 class JSThemeScope {
337 public:
338     static std::map<int32_t, JSTheme> jsThemes;
339     // indicates whether application use WithTheme containers
340     inline static bool jsThemeScopeEnabled = false;
341 };
342 } // namespace OHOS::Ace::Framework
343 #endif // FRAMEWORKS_BRIDGE_DECLARATIVE_FRONTEND_THEME_JS_THEME_H