{
    "comp": {
        "input ": {
            "width": {
                "default": {
                    "value": "256px" 
                }
            },
            "height": {
                "value": "36px"
            },
            "padding": {
                "horizontal": {
                    "value": "{ref.spacing.xs}"
                }
            },
            "spacing": {
                "horizontal": {
                    "value": "{ref.spacing.xxs}"
                }
            },
            "border": {
                "radius" : {
                    "value": "{sys.border.radius.sm}"
                },
                "default": {
                    "color":  {
                        "value": "{ref.color.grey.20}"
                    }
                },
                "hover": {
                    "color":  {
                        "value": "{ref.color.grey.40}"
                    }
                },
                "focused": {
                    "color":  {
                        "value": "{sys.border.color.active}"
                    }
                },
                "error": {
                    "color":  {
                        "value": "{sys.border.color.error}"
                    }
                },
                "success": {
                    "color":  {
                        "value": "{ref.color.green.100}"
                    }
                },
                "disabled": {
                    "color":  {
                        "value": "{ref.color.grey.20}"
                    }  
                }
            },
            "fill": {
                "color":  {
                    "value": "{ref.color.white}"
                },
                "disabled": {
                    "color":  {
                        "value": "{ref.color.grey.20}"
                    }  
                }
            },
            "icon": {
                "size": {
                    "value": "{sys.icon.md}"
                },
                "color":  {
                    "value": "{ref.color.grey.60}"
                }
            },
            "text": {
                "font-family": {
                    "value": "{sys.text.style.body.font-family}"
                },
                "size": {
                    "value": "{sys.text.style.body.size}"
                },
                "font-weight": {
                    "value": "{sys.text.style.body.weight}"
                },
                "line-height": {
                    "value": "{sys.text.style.body.line-height}"
                },
                "default": {
                    "color":  {
                        "value": "{sys.text.color.default}"
                    }
                },
                "disabled": {
                    "color":  {
                        "value": "{ref.color.grey.80}"
                    }  
                },
                "placeholder": {
                    "color":  {
                        "value": "{ref.color.grey.60}"
                    }
                }
            }
        },
        "forms": {
            "label": {
                "font-family": {
                    "value": "{sys.text.style.body.font-family}"
                },
                "size": {
                    "value": "{sys.text.style.body.size}"
                },
                "font-weight": {
                    "value": "{sys.text.style.body.weight}"
                },
                "line-height": {
                    "value": "{sys.text.style.body.line-height}"
                },
                "text": {
                    "color":  {
                        "value": "{sys.text.color.default}"
                    }
                },
                "description": {
                    "text": {
                        "font-family": {
                            "value": "{sys.text.style.caption.font-family}"
                        },
                        "size": {
                            "value": "{sys.text.style.caption.size}"
                        },
                        "font-weight": {
                            "value": "{sys.text.style.caption.weight}"
                        },
                        "line-height": {
                            "value": "{sys.text.style.caption.line-height}"
                        },
                        "color":  {
                            "value": "{sys.text.color.light}"
                        }
                    }
                },
                "spacing": {
                    "vertical": {
                        "value": "{ref.spacing.xxxs}"
                    }
                },
                "padding":{
                    "bottom": {
                        "value": "{ref.spacing.xxs}"
                    }
                }
            },
            "status": {
                "icon": {
                    "size": {
                        "value": "{sys.icon.md}"
                    },
                    "error": {
                        "color":  {
                            "value": "{ref.color.red.100}"
                        }
                    },
                    "success": {
                        "color":  {
                            "value": "{ref.color.green.100}"
                        }
                    }
                },
                "spacing": {
                    "vertical": {
                        "value": "{ref.spacing.xxxs}"
                    }
                },
                "text": {
                    "font-family": {
                        "value": "{sys.text.style.body.font-family}"
                    },
                    "size": {
                        "value": "{sys.text.style.body.size}"
                    },
                    "font-weight": {
                        "value": "{sys.text.style.body.weight}"
                    },
                    "line-height": {
                        "value": "{sys.text.style.body.line-height}"
                    },
                    "error": {
                        "color":  {
                            "value": "{sys.color.error.text}"
                        }
                    },
                    "success": {
                        "color":  {
                            "value": "{sys.color.success.light.text}"
                        }
                    }
                }
            }
        },
        "text-area": {
            "width": {
                "default": {
                    "value": "256px" 
                }
            },
            "height": {
                "value": "80px"
            },
            "padding": {
                "horizontal": {
                    "value": "{ref.spacing.xs}"
                }
            },
            "spacing": {
                "horizontal": {
                    "value": "{ref.spacing.xxs}"
                }
            },
            "border": {
                "radius" : {
                    "value": "{sys.border.radius.sm}"
                },
                "default": {
                    "color":  {
                        "value": "{ref.color.grey.60}"
                    }
                },
                "hover": {
                    "color":  {
                        "value": "{ref.color.grey.80}"
                    }
                },
                "focused": {
                    "color":  {
                        "value": "{sys.border.color.active}"
                    }
                },
                "error": {
                    "color":  {
                        "value": "{sys.border.color.error}"
                    }
                },
                "success": {
                    "color":  {
                        "value": "{ref.color.green.100}"
                    }
                },
                "disabled": {
                    "color":  {
                        "value": "{ref.color.grey.20}"
                    }  
                }
            },
            "fill": {
                "color":  {
                    "value": "{ref.color.white}"
                },
                "disabled": {
                    "color":  {
                        "value": "{ref.color.grey.20}"
                    }  
                }
            },
            "icon": {
                "size": {
                    "value": "{sys.icon.md}"
                },
                "color":  {
                    "value": "{ref.color.grey.60}"
                }
            },
            "text": {
                "font-family": {
                    "value": "{sys.text.style.body.font-family}"
                },
                "size": {
                    "value": "{sys.text.style.body.size}"
                },
                "font-weight": {
                    "value": "{sys.text.style.body.weight}"
                },
                "line-height": {
                    "value": "{sys.text.style.body.line-height}"
                },
                "default": {
                    "color":  {
                        "value": "{sys.text.color.default}"
                    }
                },
                "disabled": {
                    "color":  {
                        "value": "{ref.color.grey.80}"
                    }  
                },
                "placeholder": {
                    "color":  {
                        "value": "{ref.color.grey.60}"
                    }
                }
            }
        }
    }
}