lvgl:
  pages:
    - id: component_preview
      bg_color: 0x08142D
      bg_opa: 100%
      widgets:
        - obj:
            id: fg_card
            x: 0
            y: 0
            width: 100
            height: 100
            scrollbar_mode: OFF
            bg_color: 0x070E1B
            bg_opa: 95%
            border_color: 0x162038
            border_width: 1
            border_opa: 20%
            radius: 12
            shadow_width: 0
            shadow_color: 0x10B981
            shadow_opa: 0%
            widgets:
              - arc:
                  id: fg_arc
                  x: 4
                  y: 4
                  width: 92
                  height: 80
                  bg_opa: 0%
                  border_width: 0
                  value: 72
                  min_value: 0
                  max_value: 100
                  start_angle: 135
                  end_angle: 45
                  adjustable: false
                  arc_color: 0x10B981
                  arc_width: 10
                  arc_opa: 20%
                  arc_rounded: true
                  indicator:
                    arc_color: 0x10B981
                    arc_width: 10
                    arc_opa: 100%
                    arc_rounded: true
                  knob:
                    bg_opa: TRANSP
                    border_width: 0
              - label:
                  id: fg_lbl_value
                  x: 4
                  y: 32
                  width: 92
                  height: 24
                  text: '72%'
                  text_color: 0xF1F5F9
                  text_font: montserrat_20
                  text_align: CENTER
                  long_mode: CLIP
              - label:
                  id: fg_lbl_sub
                  x: 4
                  y: 84
                  width: 92
                  height: 12
                  text: 'Good'
                  text_color: 0x10B981
                  text_font: montserrat_10
                  text_align: CENTER
                  long_mode: CLIP