lvgl:
  pages:
    - id: component_preview
      bg_color: 0x08142D
      bg_opa: 100%
      widgets:
        - obj:
            id: dm_card
            x: 0
            y: 0
            width: 200
            height: 100
            scrollbar_mode: OFF
            bg_color: 0x070E1B
            bg_opa: 95%
            border_color: 0x162038
            border_width: 1
            border_opa: 20%
            radius: 20
            shadow_width: 0
            shadow_color: 0xFBBF24
            shadow_opa: 0%
            widgets:
              - bar:
                  id: dm_bar_accent
                  x: 10
                  y: 10
                  width: 4
                  height: 80
                  value: 100
                  min_value: 0
                  max_value: 100
                  bg_color: 0x0F1929
                  bg_opa: 100%
                  indicator:
                    bg_color: 0xFBBF24
                    bg_opa: 80%
                    radius: 3
              - label:
                  id: dm_lbl_room
                  x: 20
                  y: 30
                  width: 94
                  height: 18
                  text: 'Living Room'
                  text_color: 0xF1F5F9
                  text_font: montserrat_14
                  text_align: LEFT
                  long_mode: CLIP
              - label:
                  id: dm_lbl_pct
                  x: 120
                  y: 17
                  width: 70
                  height: 24
                  text: '75%'
                  text_color: 0xFBBF24
                  text_font: montserrat_20
                  text_align: RIGHT
                  long_mode: CLIP
              - label:
                  id: dm_lbl_sub
                  x: 20
                  y: 54
                  width: 170
                  height: 14
                  text: 'Ceiling light'
                  text_color: 0x8E9FB8
                  text_font: montserrat_10
                  text_align: LEFT
                  long_mode: CLIP
              - slider:
                  id: dm_slider
                  x: 20
                  y: 74
                  width: 170
                  height: 16
                  value: 44
                  min_value: 0
                  max_value: 100
                  bg_color: 0x0F1929
                  border_width: 0
                  indicator:
                    bg_color: 0xFBBF24
                    bg_opa: 80%
                    radius: 8
                  knob:
                    bg_color: 0xFFFFFF
                    bg_opa: 100%
                    border_width: 0
                    radius: 50
                    pad_all: 0
                  animated: true