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":"SamsungOneUI",
 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 }