[dali_2.1.35] Merge branch 'devel/master'
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / styles / 720x1280 / dali-toolkit-default-theme.json
1 /*
2  * Copyright (c) 2021 Samsung Electronics Co., Ltd.
3  *
4  * This file is part of Dali Toolkit
5  *
6  * Licensed under the Apache License, Version 2.0 (the "License");
7  * you may not use this file except in compliance with the License.
8  * You may obtain a copy of the License at
9  *
10  * http://www.apache.org/licenses/LICENSE-2.0
11  *
12  * Unless required by applicable law or agreed to in writing, software
13  * distributed under the License is distributed on an "AS IS" BASIS,
14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15  * See the License for the specific language governing permissions and
16  * limitations under the License.
17  */
18
19
20 //******************************************************************************
21 //
22 // Default Reference style theme for a 720x1280 resolution, The values determined by UX design specification.
23 // This file can be copied to a new folder within the styles/ directory and amended with new default values.
24 // Can be overriden if StyleManager applies another style sheet.
25 //
26 //******************************************************************************
27
28 {
29   "config":
30   {
31     "brokenImageUrl":"{DALI_IMAGE_DIR}broken.png",
32     "alwaysShowFocus":false,
33     "clearFocusOnEscape":true
34   },
35   "styles":
36   {
37     "TextLabel":
38     {
39       "pointSize":18,
40       "enableAutoScroll":false,
41       "autoScrollLoopCount":2,
42       "autoScrollGap":50,
43       "autoScrollSpeed":80
44     },
45
46     "TextLabelFontSize0":
47     {
48       "pointSize":8
49     },
50     "TextLabelFontSize1":
51     {
52       "pointSize":10
53     },
54     "TextLabelFontSize2":
55     {
56       "pointSize":15
57     },
58     "TextLabelFontSize3":
59     {
60       "pointSize":19
61     },
62     "TextLabelFontSize4":
63     {
64       "pointSize":25
65     },
66     "TextField":
67     {
68       "pointSize":18,
69       "primaryCursorColor":[0.0,0.72,0.9,1.0],
70       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
71       "cursorWidth":3,
72       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
73       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
74       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
75       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
76       "enableSelection":true
77     },
78
79     "TextFieldFontSize0":
80     {
81       "pointSize":10
82     },
83     "TextFieldFontSize1":
84     {
85       "pointSize":10
86     },
87     "TextFieldFontSize2":
88     {
89       "pointSize":10
90     },
91     "TextFieldFontSize3":
92     {
93       "pointSize":10
94     },
95     "TextFieldFontSize4":
96     {
97       "pointSize":10
98     },
99     "TextSelectionPopup":
100     {
101       "popupMaxSize":[656,40],
102       "optionDividerSize":[0,0],
103       "optionDividerPadding":[0.0,0.0,0.0,0.0],
104       "popupDividerColor":[0.0,0.0,0.0,1.0],
105       "popupIconColor":[1.0,1.0,1.0,1.0],
106       "popupPressedColor":[0.24,0.72,0.8,0.11],
107       "background": {
108         "visualType": "IMAGE",
109         "url": "{DALI_IMAGE_DIR}IoT-selection-popup-background.9.png"
110         },
111       "backgroundBorder": {
112         "visualType": "IMAGE",
113         "url": "{DALI_IMAGE_DIR}IoT-selection-popup-border.9.png",
114         "mixColor":[1.0,1.0,1.0,1.0]
115         },
116       "popupFadeInDuration":0.25,
117       "popupFadeOutDuration":0.25
118     },
119     "TextSelectionPopupButton":
120     {
121       "minimumSize":[0,40],
122       "labelPadding":[-4.0,-4.0,0.0,0.0],
123       "label":
124       {
125         "visualType":"TEXT",
126         "pointSize":6.0,
127         "textColor":[0.04,0.06,0.13,1.0],
128         "fontFamily":"BreezeSans",
129         "fontStyle" : {"weight":"regular"}
130       },
131       "unselectedBackgroundVisual":
132       {
133         "visualType": "IMAGE",
134         "url": ""
135       },
136       "selectedBackgroundVisual":
137       {
138         "visualType": "IMAGE",
139         "url": ""
140       }
141     },
142     "TextSelectionToolbar":
143     {
144       "enableOvershoot":true,
145       "enableScrollBar":false,
146       "scrollView":
147       {
148         "overshootAnimationSpeed":360.0,
149         "overshootSize":[720.0,130.0]
150       }
151     },
152     "TextSelectionScrollBar":
153     {
154       "indicatorShowDuration":0.25,
155       "indicatorHideDuration":0.25,
156       "indicatorTransientDuration":1.0
157     },
158     "TextSelectionScrollIndicator":
159     {
160       "image":
161       {
162         "visualType":"IMAGE",
163         "url":"{DALI_IMAGE_DIR}text_selection_scroll_indicator.9.png"
164       },
165       "color":[0.0,0.72,0.9,0.7]
166     },
167     "ScrollView":
168     {
169       "overshootEffectColor":"B018",
170       "overshootAnimationSpeed":360.0,
171       "overshootSize":[720.0,130.0]
172     },
173     "ItemView":
174     {
175       "overshootEffectColor":"B018",
176       "overshootAnimationSpeed":360.0,
177       "overshootSize":[720.0,130.0]
178     },
179     "ScrollBar":
180     {
181       "indicatorShowDuration":0.25,
182       "indicatorHideDuration":0.25,
183       "color":[0.0,0.72,0.9,0.7]
184     },
185     "TextEditor":
186     {
187       "pointSize":18,
188       "primaryCursorColor":[0.0,0.72,0.9,1.0],
189       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
190       "cursorWidth":3,
191       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
192       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
193       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
194       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
195       "enableScrollBar":true,
196       "scrollBarShowDuration":0.8,
197       "scrollBarFadeDuration":0.5,
198       "enableSelection":true
199     },
200     "Popup":
201     {
202       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
203       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
204       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
205       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
206       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
207       "popupBackgroundBorder":[17,17,13,13]
208     },
209     "ConfirmationPopup":
210     {
211       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
212       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
213       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
214       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
215       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
216       "popupBackgroundBorder":[17,17,13,13]
217     },
218     "Slider":
219     {
220       "showPopup": true,
221       "showValue": true,
222       "valuePrecision": 0,
223       "trackVisual":{
224         "url":"{DALI_IMAGE_DIR}slider-skin.9.png",
225         "size":[27,27]
226       },
227       "progressVisual":{
228         "url":"{DALI_IMAGE_DIR}slider-skin-progress.9.png",
229         "size":[27,27]
230       },
231       "handleVisual":{
232         "url":"{DALI_IMAGE_DIR}slider-skin-handle.png",
233         "size":[72,72]
234       },
235       "popupVisual":"{DALI_IMAGE_DIR}slider-popup.9.png",
236       "popupArrowVisual":"{DALI_IMAGE_DIR}slider-popup-arrow.9.png",
237       "disableColor":[0.5, 0.5, 0.5, 1.0],
238       "popupTextColor":[0.5,0.5,0.5,1.0],
239       "hitRegion":[0, 72],
240       "marks":[],
241       "snapToMarks":false,
242       "markTolerance":0.05
243     },
244     "SliderHandleTextLabel":
245     {
246       "textColor":[0.8,0.8,1,1]
247     },
248     "ProgressBar":
249     {
250       "trackVisual":{
251         "visualType":"IMAGE",
252         "url":"{DALI_IMAGE_DIR}progress-bar-skin-track.9.png"
253       },
254       "progressVisual":{
255         "visualType":"IMAGE",
256         "url":"{DALI_IMAGE_DIR}progress-bar-skin-progress.9.png"
257       },
258       "secondaryProgressVisual":{
259         "visualType":"IMAGE",
260         "url":"{DALI_IMAGE_DIR}progress-bar-skin-secondary-progress.9.png"
261       },
262       "indeterminateVisual":{
263         "visualType":"IMAGE",
264         "pixelArea":[0.0, 0.0, 10.0, 1.0],
265         "wrapModeU":"REPEAT",
266         "url":"{DALI_IMAGE_DIR}progress-bar-skin-indeterminate.png"
267       },
268       "indeterminateVisualAnimation":
269       [
270         {
271           "target":"indeterminateVisual",
272           "property":"pixelArea",
273           "initialValue":[0.0, 0.0, 10.0, 1.0],
274           "targetValue":[-1.0, 0.0, 10.0, 1.0],
275           "animator":
276           {
277             "alphaFunction":"DEFAULT",
278             "timePeriod":
279             {
280               "duration":0.8,
281               "delay":0
282             }
283           }
284         }
285       ],
286       "labelVisual":{
287         "visualType": "TEXT",
288         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
289         "pointSize" : 12.0, // Point size must always be provided to Text Visual
290         "horizontalAlignment": "CENTER",
291         "verticalAlignment": "CENTER"
292       },
293       "progressValue": 0.0,
294       "secondaryProgressValue":0.0,
295       "indeterminate": false
296     },
297     "CircularProgressBar":
298     {
299       "size":[64,64],
300       "trackVisual":{
301         "visualType":"ARC",
302         "mixColor":[0.0,0.165,0.302,1.0],
303         "thickness":4.0,
304         "startAngle":0.0,
305         "cap":"ROUND"
306       },
307       "progressVisual":{
308         "visualType":"ARC",
309         "mixColor":[0.0,0.549,1.0,1.0],
310         "thickness":4.0,
311         "startAngle":0.0,
312         "cap":"ROUND"
313       },
314       "secondaryProgressVisual":{
315         "visualType":"ARC",
316         "mixColor":[0.0,0.549,1.0,0.3],
317         "thickness":4.0,
318         "startAngle":0.0,
319         "cap":"ROUND"
320       },
321       "indeterminateVisual":{
322         "visualType":"ARC",
323         "mixColor":[0.02,0.71,0.525,1.0],
324         "thickness":4.0,
325         "startAngle":267.0,
326         "sweepAngle":75.0,
327         "cap":"ROUND"
328       },
329       "indeterminateVisualAnimation":
330       [
331         {
332           "target":"trackVisual",
333           "property":"opacity",
334           "targetValue": 0,
335           "animator":
336           {
337             "alphaFunction":"DEFAULT",
338             "timePeriod":
339             {
340               "duration":0,
341               "delay":0
342             }
343           }
344         },
345         {
346           "target":"secondaryProgressVisual",
347           "property":"opacity",
348           "targetValue": 0,
349           "animator":
350           {
351             "alphaFunction":"DEFAULT",
352             "timePeriod":
353             {
354               "duration":0,
355               "delay":0
356             }
357           }
358         },
359         {
360           "target":"progressVisual",
361           "property":"sweepAngle",
362           "initialValue": 75,
363           "targetValue": 180,
364           "animator":
365           {
366             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
367             "timePeriod":
368             {
369               "duration":1.0,
370               "delay":0.0
371             }
372           }
373         },
374         {
375           "target":"progressVisual",
376           "property":"sweepAngle",
377           "targetValue": 75,
378           "animator":
379           {
380             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
381             "timePeriod":
382             {
383               "duration":1.0,
384               "delay":2.0
385             }
386           }
387         },
388         {
389           "target":"progressVisual",
390           "property":"startAngle",
391           "initialValue": 87,
392           "targetValue": 1887,
393           "animator":
394           {
395             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
396             "timePeriod":
397             {
398               "duration":3.0,
399               "delay":0.0
400             }
401           }
402         },
403         {
404           "target":"indeterminateVisual",
405           "property":"sweepAngle",
406           "initialValue": 75,
407           "targetValue": 180,
408           "animator":
409           {
410             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
411             "timePeriod":
412             {
413               "duration":1.0,
414               "delay":0.0
415             }
416           }
417         },
418         {
419           "target":"indeterminateVisual",
420           "property":"sweepAngle",
421           "targetValue": 75,
422           "animator":
423           {
424             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
425             "timePeriod":
426             {
427               "duration":1.0,
428               "delay":2.0
429             }
430           }
431         },
432         {
433           "target":"indeterminateVisual",
434           "property":"startAngle",
435           "initialValue": 267,
436           "targetValue": 2067,
437           "animator":
438           {
439             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
440             "timePeriod":
441             {
442               "duration":3.0,
443               "delay":0.0
444             }
445           }
446         }
447       ],
448       "labelVisual":{
449         "visualType": "TEXT",
450         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
451         "pointSize" : 12.0, // Point size must always be provided to Text Visual
452         "horizontalAlignment": "CENTER",
453         "verticalAlignment": "CENTER"
454       },
455       "progressValue": 0.2,
456       "secondaryProgressValue":0.4,
457       "indeterminate": false
458     },
459     "Button":
460     {
461       "initialAutoRepeatingDelay":2.0,
462       "nextAutoRepeatingDelay":0.9
463       // Note: Visuals added to Button will be used in all derived buttons unless overridden.
464     },
465     "PushButton":
466     {
467       "styles":["Button"],
468       "autoRepeating":false,
469       "togglable":false,
470       "labelPadding":[ 12.0, 12.0, 12.0, 12.0 ],
471       "label":
472        {
473          "visualType": "TEXT",
474          "horizontalAlignment": "CENTER",
475          "pointSize" : 10.0, // Point size must always be provided to Text Visual
476          "verticalAlignment": "CENTER"
477        },
478       "unselectedBackgroundVisual":
479        {
480          "visualType": "IMAGE",
481          "url": "{DALI_IMAGE_DIR}button-up.9.png"
482        },
483        "selectedBackgroundVisual":
484        {
485          "visualType": "IMAGE",
486          "url": "{DALI_IMAGE_DIR}button-down.9.png"
487        },
488        "disabledSelectedBackgroundVisual":
489        {
490          "visualType": "IMAGE",
491          "url": "{DALI_IMAGE_DIR}button-down-disabled.9.png"
492        },
493        "disabledUnselectedBackgroundVisual":
494        {
495          "visualType": "IMAGE",
496          "url": "{DALI_IMAGE_DIR}button-disabled.9.png"
497        }
498     },
499     "CheckBoxButton":
500     {
501       "styles":["Button"],
502       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
503       "label":
504        {
505          "visualType": "TEXT",
506          "pointSize" : 10.0, // Point size must always be provided to Text Visual
507          "verticalAlignment": "CENTER"
508        },
509       "unselectedVisual":
510       {
511         "visualType": "IMAGE",
512         "url": "{DALI_IMAGE_DIR}checkbox-unselected.png"
513       },
514       "selectedVisual":
515       {
516         "visualType": "IMAGE",
517         "url": "{DALI_IMAGE_DIR}checkbox-selected.png"
518       },
519       "disabledUnselectedVisual":
520       {
521         "visualType": "IMAGE",
522         "url": "{DALI_IMAGE_DIR}checkbox-unselected-disabled.png"
523       },
524       "disabledSelectedVisual":
525       {
526         "visualType": "IMAGE",
527         "url": "{DALI_IMAGE_DIR}checkbox-selected-disabled.png"
528       }
529     },
530     "RadioButton":
531     {
532       "styles":["Button"],
533       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
534       "label":
535        {
536          "visualType": "TEXT",
537          "pointSize" : 10.0, // Point size must always be provided to Text Visual
538          "verticalAlignment": "CENTER"
539        },
540       "unselectedVisual":
541       {
542         "visualType": "IMAGE",
543         "url": "{DALI_IMAGE_DIR}radio-button-unselected.png"
544       },
545       "selectedVisual":
546       {
547         "visualType": "IMAGE",
548         "url": "{DALI_IMAGE_DIR}radio-button-selected.png"
549       },
550       "disabledUnselectedVisual":
551       {
552         "visualType": "IMAGE",
553         "url": "{DALI_IMAGE_DIR}radio-button-unselected-disabled.png"
554       },
555       "disabledSelectedVisual":
556       {
557         "visualType": "IMAGE",
558         "url": "{DALI_IMAGE_DIR}radio-button-selected-disabled.png"
559       }
560     }
561   }
562 }