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,36],
 102       "optionDividerSize":[1,0],
 103       "optionDividerPadding":[0.0,0.0,6.0,6.0],
 104       "popupDividerColor":[1.0,1.0,1.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         "mixColor":[0.0,0.05,0.17,0.9]
 111         },
 112       "backgroundBorder": {
 113         "visualType": "IMAGE",
 114         "url": "{DALI_IMAGE_DIR}selection-popup-border.9.png",
 115         "mixColor":[0.0,0.0,0.0,0.0]
 116         },
 117       "popupFadeInDuration":0.25,
 118       "popupFadeOutDuration":0.25
 119     },
 120     "TextSelectionPopupButton":
 121     {
 122       "minimumSize":[0,36],
 123       "labelPadding":[0.0,0.0,0.0,0.0],
 124       "label":
 125       {
 126         "visualType":"TEXT",
 127         "pointSize":18,
 128         "textColor":[1.0,1.0,1.0,1.0],
 129         "fontFamily":"BreezeSans",
 130         "fontStyle" : {"weight":"light"}
 131       },
 132       "unselectedBackgroundVisual":
 133       {
 134         "visualType": "IMAGE",
 135         "url": ""
 136       },
 137       "selectedBackgroundVisual":
 138       {
 139         "visualType": "IMAGE",
 140         "url": ""
 141       }
 142     },
 143     "TextSelectionToolbar":
 144     {
 145       "enableOvershoot":true,
 146       "enableScrollBar":false,
 147       "scrollView":
 148       {
 149         "overshootAnimationSpeed":360.0,
 150         "overshootSize":[720.0,130.0]
 151       }
 152     },
 153     "TextSelectionScrollBar":
 154     {
 155       "indicatorShowDuration":0.25,
 156       "indicatorHideDuration":0.25,
 157       "indicatorTransientDuration":1.0
 158     },
 159     "TextSelectionScrollIndicator":
 160     {
 161       "image":
 162       {
 163         "visualType":"IMAGE",
 164         "url":"{DALI_IMAGE_DIR}text_selection_scroll_indicator.9.png"
 165       },
 166       "color":[0.0,0.72,0.9,0.7]
 167     },
 168     "ScrollView":
 169     {
 170       "overshootEffectColor":"B018",
 171       "overshootAnimationSpeed":360.0,
 172       "overshootSize":[720.0,130.0]
 173     },
 174     "ItemView":
 175     {
 176       "overshootEffectColor":"B018",
 177       "overshootAnimationSpeed":360.0,
 178       "overshootSize":[720.0,130.0]
 179     },
 180     "ScrollBar":
 181     {
 182       "indicatorShowDuration":0.25,
 183       "indicatorHideDuration":0.25,
 184       "color":[0.0,0.72,0.9,0.7]
 185     },
 186     "TextEditor":
 187     {
 188       "pointSize":18,
 189       "primaryCursorColor":[0.0,0.72,0.9,1.0],
 190       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
 191       "cursorWidth":3,
 192       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
 193       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
 194       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
 195       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
 196       "enableScrollBar":true,
 197       "scrollBarShowDuration":0.8,
 198       "scrollBarFadeDuration":0.5,
 199       "enableSelection":true
 200     },
 201     "Popup":
 202     {
 203       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
 204       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
 205       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
 206       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
 207       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
 208       "popupBackgroundBorder":[17,17,13,13]
 209     },
 210     "ConfirmationPopup":
 211     {
 212       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
 213       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
 214       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
 215       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
 216       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
 217       "popupBackgroundBorder":[17,17,13,13]
 218     },
 219     "Slider":
 220     {
 221       "showPopup": true,
 222       "showValue": true,
 223       "valuePrecision": 0,
 224       "trackVisual":{
 225         "url":"{DALI_IMAGE_DIR}slider-skin.9.png",
 226         "size":[27,27]
 227       },
 228       "progressVisual":{
 229         "url":"{DALI_IMAGE_DIR}slider-skin-progress.9.png",
 230         "size":[27,27]
 231       },
 232       "handleVisual":{
 233         "url":"{DALI_IMAGE_DIR}slider-skin-handle.png",
 234         "size":[72,72]
 235       },
 236       "popupVisual":"{DALI_IMAGE_DIR}slider-popup.9.png",
 237       "popupArrowVisual":"{DALI_IMAGE_DIR}slider-popup-arrow.9.png",
 238       "disableColor":[0.5, 0.5, 0.5, 1.0],
 239       "popupTextColor":[0.5,0.5,0.5,1.0],
 240       "hitRegion":[0, 72],
 241       "marks":[],
 242       "snapToMarks":false,
 243       "markTolerance":0.05
 244     },
 245     "SliderHandleTextLabel":
 246     {
 247       "textColor":[0.8,0.8,1,1]
 248     },
 249     "ProgressBar":
 250     {
 251       "trackVisual":{
 252         "visualType":"IMAGE",
 253         "url":"{DALI_IMAGE_DIR}progress-bar-skin-track.9.png"
 254       },
 255       "progressVisual":{
 256         "visualType":"IMAGE",
 257         "url":"{DALI_IMAGE_DIR}progress-bar-skin-progress.9.png"
 258       },
 259       "secondaryProgressVisual":{
 260         "visualType":"IMAGE",
 261         "url":"{DALI_IMAGE_DIR}progress-bar-skin-secondary-progress.9.png"
 262       },
 263       "indeterminateVisual":{
 264         "visualType":"IMAGE",
 265         "pixelArea":[0.0, 0.0, 10.0, 1.0],
 266         "wrapModeU":"REPEAT",
 267         "url":"{DALI_IMAGE_DIR}progress-bar-skin-indeterminate.png"
 268       },
 269       "indeterminateVisualAnimation":
 270       [
 271         {
 272           "target":"indeterminateVisual",
 273           "property":"pixelArea",
 274           "initialValue":[0.0, 0.0, 10.0, 1.0],
 275           "targetValue":[-1.0, 0.0, 10.0, 1.0],
 276           "animator":
 277           {
 278             "alphaFunction":"DEFAULT",
 279             "timePeriod":
 280             {
 281               "duration":0.8,
 282               "delay":0
 283             }
 284           }
 285         }
 286       ],
 287       "labelVisual":{
 288         "visualType": "TEXT",
 289         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
 290         "pointSize" : 12.0, // Point size must always be provided to Text Visual
 291         "horizontalAlignment": "CENTER",
 292         "verticalAlignment": "CENTER"
 293       },
 294       "progressValue": 0.0,
 295       "secondaryProgressValue":0.0,
 296       "indeterminate": false
 297     },
 298     "CircularProgressBar":
 299     {
 300       "size":[64,64],
 301       "trackVisual":{
 302         "visualType":"ARC",
 303         "mixColor":[0.0,0.165,0.302,1.0],
 304         "thickness":4.0,
 305         "startAngle":0.0,
 306         "cap":"ROUND"
 307       },
 308       "progressVisual":{
 309         "visualType":"ARC",
 310         "mixColor":[0.0,0.549,1.0,1.0],
 311         "thickness":4.0,
 312         "startAngle":0.0,
 313         "cap":"ROUND"
 314       },
 315       "secondaryProgressVisual":{
 316         "visualType":"ARC",
 317         "mixColor":[0.0,0.549,1.0,0.3],
 318         "thickness":4.0,
 319         "startAngle":0.0,
 320         "cap":"ROUND"
 321       },
 322       "indeterminateVisual":{
 323         "visualType":"ARC",
 324         "mixColor":[0.02,0.71,0.525,1.0],
 325         "thickness":4.0,
 326         "startAngle":267.0,
 327         "sweepAngle":75.0,
 328         "cap":"ROUND"
 329       },
 330       "indeterminateVisualAnimation":
 331       [
 332         {
 333           "target":"trackVisual",
 334           "property":"opacity",
 335           "targetValue": 0,
 336           "animator":
 337           {
 338             "alphaFunction":"DEFAULT",
 339             "timePeriod":
 340             {
 341               "duration":0,
 342               "delay":0
 343             }
 344           }
 345         },
 346         {
 347           "target":"secondaryProgressVisual",
 348           "property":"opacity",
 349           "targetValue": 0,
 350           "animator":
 351           {
 352             "alphaFunction":"DEFAULT",
 353             "timePeriod":
 354             {
 355               "duration":0,
 356               "delay":0
 357             }
 358           }
 359         },
 360         {
 361           "target":"progressVisual",
 362           "property":"sweepAngle",
 363           "initialValue": 75,
 364           "targetValue": 180,
 365           "animator":
 366           {
 367             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
 368             "timePeriod":
 369             {
 370               "duration":1.0,
 371               "delay":0.0
 372             }
 373           }
 374         },
 375         {
 376           "target":"progressVisual",
 377           "property":"sweepAngle",
 378           "targetValue": 75,
 379           "animator":
 380           {
 381             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
 382             "timePeriod":
 383             {
 384               "duration":1.0,
 385               "delay":2.0
 386             }
 387           }
 388         },
 389         {
 390           "target":"progressVisual",
 391           "property":"startAngle",
 392           "initialValue": 87,
 393           "targetValue": 1887,
 394           "animator":
 395           {
 396             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
 397             "timePeriod":
 398             {
 399               "duration":3.0,
 400               "delay":0.0
 401             }
 402           }
 403         },
 404         {
 405           "target":"indeterminateVisual",
 406           "property":"sweepAngle",
 407           "initialValue": 75,
 408           "targetValue": 180,
 409           "animator":
 410           {
 411             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
 412             "timePeriod":
 413             {
 414               "duration":1.0,
 415               "delay":0.0
 416             }
 417           }
 418         },
 419         {
 420           "target":"indeterminateVisual",
 421           "property":"sweepAngle",
 422           "targetValue": 75,
 423           "animator":
 424           {
 425             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
 426             "timePeriod":
 427             {
 428               "duration":1.0,
 429               "delay":2.0
 430             }
 431           }
 432         },
 433         {
 434           "target":"indeterminateVisual",
 435           "property":"startAngle",
 436           "initialValue": 267,
 437           "targetValue": 2067,
 438           "animator":
 439           {
 440             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
 441             "timePeriod":
 442             {
 443               "duration":3.0,
 444               "delay":0.0
 445             }
 446           }
 447         }
 448       ],
 449       "labelVisual":{
 450         "visualType": "TEXT",
 451         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
 452         "pointSize" : 12.0, // Point size must always be provided to Text Visual
 453         "horizontalAlignment": "CENTER",
 454         "verticalAlignment": "CENTER"
 455       },
 456       "progressValue": 0.2,
 457       "secondaryProgressValue":0.4,
 458       "indeterminate": false
 459     },
 460     "Button":
 461     {
 462       "initialAutoRepeatingDelay":2.0,
 463       "nextAutoRepeatingDelay":0.9
 464       // Note: Visuals added to Button will be used in all derived buttons unless overridden.
 465     },
 466     "PushButton":
 467     {
 468       "styles":["Button"],
 469       "autoRepeating":false,
 470       "togglable":false,
 471       "labelPadding":[ 12.0, 12.0, 12.0, 12.0 ],
 472       "label":
 473        {
 474          "visualType": "TEXT",
 475          "horizontalAlignment": "CENTER",
 476          "pointSize" : 10.0, // Point size must always be provided to Text Visual
 477          "verticalAlignment": "CENTER"
 478        },
 479       "unselectedBackgroundVisual":
 480        {
 481          "visualType": "IMAGE",
 482          "url": "{DALI_IMAGE_DIR}button-up.9.png"
 483        },
 484        "selectedBackgroundVisual":
 485        {
 486          "visualType": "IMAGE",
 487          "url": "{DALI_IMAGE_DIR}button-down.9.png"
 488        },
 489        "disabledSelectedBackgroundVisual":
 490        {
 491          "visualType": "IMAGE",
 492          "url": "{DALI_IMAGE_DIR}button-down-disabled.9.png"
 493        },
 494        "disabledUnselectedBackgroundVisual":
 495        {
 496          "visualType": "IMAGE",
 497          "url": "{DALI_IMAGE_DIR}button-disabled.9.png"
 498        }
 499     },
 500     "CheckBoxButton":
 501     {
 502       "styles":["Button"],
 503       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
 504       "label":
 505        {
 506          "visualType": "TEXT",
 507          "pointSize" : 10.0, // Point size must always be provided to Text Visual
 508          "verticalAlignment": "CENTER"
 509        },
 510       "unselectedVisual":
 511       {
 512         "visualType": "IMAGE",
 513         "url": "{DALI_IMAGE_DIR}checkbox-unselected.png"
 514       },
 515       "selectedVisual":
 516       {
 517         "visualType": "IMAGE",
 518         "url": "{DALI_IMAGE_DIR}checkbox-selected.png"
 519       },
 520       "disabledUnselectedVisual":
 521       {
 522         "visualType": "IMAGE",
 523         "url": "{DALI_IMAGE_DIR}checkbox-unselected-disabled.png"
 524       },
 525       "disabledSelectedVisual":
 526       {
 527         "visualType": "IMAGE",
 528         "url": "{DALI_IMAGE_DIR}checkbox-selected-disabled.png"
 529       }
 530     },
 531     "RadioButton":
 532     {
 533       "styles":["Button"],
 534       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
 535       "label":
 536        {
 537          "visualType": "TEXT",
 538          "pointSize" : 10.0, // Point size must always be provided to Text Visual
 539          "verticalAlignment": "CENTER"
 540        },
 541       "unselectedVisual":
 542       {
 543         "visualType": "IMAGE",
 544         "url": "{DALI_IMAGE_DIR}radio-button-unselected.png"
 545       },
 546       "selectedVisual":
 547       {
 548         "visualType": "IMAGE",
 549         "url": "{DALI_IMAGE_DIR}radio-button-selected.png"
 550       },
 551       "disabledUnselectedVisual":
 552       {
 553         "visualType": "IMAGE",
 554         "url": "{DALI_IMAGE_DIR}radio-button-unselected-disabled.png"
 555       },
 556       "disabledSelectedVisual":
 557       {
 558         "visualType": "IMAGE",
 559         "url": "{DALI_IMAGE_DIR}radio-button-selected-disabled.png"
 560       }
 561     }
 562   }
 563 }