Dingdong_app/mapping.json

{
    "strict": {
        "text-heading-1-font-size": 32,
        "text-heading-2-font-size": 30,
        "text-heading-3-font-size": 26,
        "text-heading-4-font-size": 22,
        "text-heading-5-font-size": 18,
        "text-heading-6-font-size": 16,
        "text-subtitle-1-font-weight": "400",
        "text-subtitle-2-font-weight": "400",
        "text-label-font-size": 10,
        "text-label-font-weight": "400",
        "text-label-font-family": "$text-font-family",
        "border-radius": 3
    },
    "components": {
        "Avatar": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "roundCoefficient": {
                        "type": "number"
                    },
                    "width": {
                        "type": "number"
                    },
                    "height": {
                        "type": "number"
                    }
                },
                "appearances": {
                    "default": {
                        "default": true
                    }
                },
                "variantGroups": {
                    "shape": {
                        "round": {
                            "default": true
                        },
                        "rounded": {
                            "default": false
                        },
                        "square": {
                            "default": false
                        }
                    },
                    "size": {
                        "tiny": {
                            "default": false
                        },
                        "small": {
                            "default": false
                        },
                        "medium": {
                            "default": true
                        },
                        "large": {
                            "default": false
                        },
                        "giant": {
                            "default": false
                        }
                    }
                },
                "states": {}
            },
            "appearances": {
                "default": {
                    "mapping": {},
                    "variantGroups": {
                        "shape": {
                            "round": {
                                "roundCoefficient": 0.5
                            },
                            "rounded": {
                                "roundCoefficient": 0.03
                            },
                            "square": {
                                "roundCoefficient": 0.0
                            }
                        },
                        "size": {
                            "tiny": {
                                "width": "size-tiny",
                                "height": "size-tiny"
                            },
                            "small": {
                                "width": "size-small",
                                "height": "size-small"
                            },
                            "medium": {
                                "width": "size-medium",
                                "height": "size-medium"
                            },
                            "large": {
                                "width": "size-large",
                                "height": "size-large"
                            },
                            "giant": {
                                "width": "size-giant",
                                "height": "size-giant"
                            }
                        }
                    }
                }
            }
        },
        "Input": {
            "appearances": {
                "default": {
                    "mapping": {
                        "paddingHorizontal": 8,
                        "textMarginHorizontal": 8,
                        "iconWidth": 24,
                        "iconHeight": 24,
                        "iconMarginHorizontal": 8,
                        "labelMarginBottom": 4,
                        "labelFontSize": "text-label-font-size",
                        "labelFontWeight": "text-label-font-weight",
                        "captionMarginTop": 0,
                        "captionFontSize": "text-caption-1-font-size",
                        "captionFontWeight": "text-caption-1-font-weight",
                        "captionFontFamily": "text-caption-1-font-family",
                        "captionIconWidth": 10,
                        "captionIconHeight": 10,
                        "captionIconMarginRight": 8
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "backgroundColor": "#F0F0F0",
                                "labelColor": "text-basic-color",
                                "captionColor": "color-danger-500",
                                "state": {
                                    "focused": {
                                        "backgroundColor": "#F0F0F0"
                                    },
                                    "active": {
                                        "backgroundColor": "#F0F0F0"
                                    },
                                    "hover": {
                                        "backgroundColor": "#F0F0F0"
                                    },
                                    "disabled": {
                                        "backgroundColor": "#F0F0F0"
                                    }
                                }
                            }
                        },
                        "size": {
                            "small": {
                                "minHeight": "size-small",
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "paddingVertical": 3,
                                "textFontSize": "text-subtitle-2-font-size",
                                "textFontWeight": "normal"
                            }
                        }
                    }
                }
            }
        },
        "Button": {
            "appearances": {
                "filled": {
                    "variantGroups": {
                        "size": {
                            "tiny": {
                                "minWidth": 0,
                                "minHeight": 0,
                                "borderRadius": "border-radius",
                                "borderWidth": 0,
                                "paddingHorizontal": 6,
                                "paddingVertical": 3,
                                "textMarginHorizontal": 0,
                                "textFontSize": 12,
                                "textFontWeight": "bold",
                                "iconWidth": 12,
                                "iconHeight": 12,
                                "iconMarginHorizontal": 6
                            },
                            "small": {
                                "minWidth": 49,
                                "minHeight": 22,
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "paddingHorizontal": 7,
                                "paddingVertical": 3,
                                "textMarginHorizontal": 7,
                                "textFontSize": 12,
                                "textFontWeight": "normal",
                                "iconWidth": 16,
                                "iconHeight": 16,
                                "iconMarginHorizontal": 8
                            },
                            "medium": {
                                "minWidth": 112,
                                "minHeight": 11,
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "paddingHorizontal": 10,
                                "paddingVertical": 6,
                                "textMarginHorizontal": 10,
                                "textFontSize": 12,
                                "textFontWeight": "bold",
                                "iconWidth": 20,
                                "iconHeight": 20,
                                "iconMarginHorizontal": 10
                            },
                            "large": {
                                "minWidth": "size-large",
                                "minHeight": "size-large",
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "paddingHorizontal": 10,
                                "paddingVertical": 14,
                                "textMarginHorizontal": 10,
                                "textFontSize": 16,
                                "textFontWeight": "bold",
                                "iconWidth": 24,
                                "iconHeight": 24,
                                "iconMarginHorizontal": 10
                            },
                            "giant": {
                                "minWidth": "size-giant",
                                "minHeight": "size-giant",
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "paddingHorizontal": 12,
                                "paddingVertical": 16,
                                "textMarginHorizontal": 12,
                                "textFontSize": 18,
                                "textFontWeight": "bold",
                                "iconWidth": 24,
                                "iconHeight": 24,
                                "iconMarginHorizontal": 12
                            }
                        }
                    }
                },
                "outline": {
                    "mapping": {},
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "borderColor": "color-basic-transparent-default-border",
                                "backgroundColor": "color-basic-transparent-default",
                                "textColor": "text-hint-color",
                                "iconTintColor": "text-hint-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-focus-border",
                                        "backgroundColor": "color-basic-transparent-focus",
                                        "textColor": "text-hint-color",
                                        "iconTintColor": "text-hint-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-basic-transparent-hover-border",
                                        "backgroundColor": "color-basic-transparent-hover",
                                        "textColor": "text-hint-color",
                                        "iconTintColor": "text-hint-color"
                                    },
                                    "active": {
                                        "borderColor": "color-basic-transparent-active-border",
                                        "backgroundColor": "color-basic-transparent-active",
                                        "textColor": "text-hint-color",
                                        "iconTintColor": "text-hint-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-basic-transparent-disabled-border",
                                        "backgroundColor": "color-basic-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "primary": {
                                "borderColor": "color-primary-transparent-default-border",
                                "backgroundColor": "#fff",
                                "textColor": "text-primary-color",
                                "iconTintColor": "text-primary-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-primary-transparent-focus-border",
                                        "backgroundColor": "color-primary-transparent-focus",
                                        "textColor": "text-primary-color",
                                        "iconTintColor": "text-primary-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-primary-transparent-hover-border",
                                        "backgroundColor": "color-primary-transparent-hover",
                                        "textColor": "text-primary-color",
                                        "iconTintColor": "text-primary-color"
                                    },
                                    "active": {
                                        "borderColor": "color-primary-transparent-active-border",
                                        "backgroundColor": "color-primary-transparent-active",
                                        "textColor": "text-primary-color",
                                        "iconTintColor": "text-primary-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-primary-transparent-disabled-border",
                                        "backgroundColor": "color-primary-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "success": {
                                "borderColor": "color-success-transparent-default-border",
                                "backgroundColor": "color-success-transparent-default",
                                "textColor": "text-success-color",
                                "iconTintColor": "text-success-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-success-transparent-focus-border",
                                        "backgroundColor": "color-success-transparent-focus",
                                        "textColor": "text-success-color",
                                        "iconTintColor": "text-success-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-success-transparent-hover-border",
                                        "backgroundColor": "color-success-transparent-hover",
                                        "textColor": "text-success-color",
                                        "iconTintColor": "text-success-color"
                                    },
                                    "active": {
                                        "borderColor": "color-success-transparent-active-border",
                                        "backgroundColor": "color-success-transparent-active",
                                        "textColor": "text-success-color",
                                        "iconTintColor": "text-success-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-success-transparent-disabled-border",
                                        "backgroundColor": "color-success-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "info": {
                                "borderColor": "color-info-transparent-default-border",
                                "backgroundColor": "color-info-transparent-default",
                                "textColor": "text-info-color",
                                "iconTintColor": "text-info-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-info-transparent-focus-border",
                                        "backgroundColor": "color-info-transparent-focus",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-info-transparent-hover-border",
                                        "backgroundColor": "color-info-transparent-hover",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "active": {
                                        "borderColor": "color-info-transparent-active-border",
                                        "backgroundColor": "color-info-transparent-active",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-info-transparent-disabled-border",
                                        "backgroundColor": "color-info-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "warning": {
                                "borderColor": "color-warning-transparent-default-border",
                                "backgroundColor": "color-warning-transparent-default",
                                "textColor": "text-warning-color",
                                "iconTintColor": "text-warning-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-warning-transparent-focus-border",
                                        "backgroundColor": "color-warning-transparent-focus",
                                        "textColor": "text-warning-color",
                                        "iconTintColor": "text-warning-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-warning-transparent-hover-border",
                                        "backgroundColor": "color-warning-transparent-hover",
                                        "textColor": "text-warning-color",
                                        "iconTintColor": "text-warning-color"
                                    },
                                    "active": {
                                        "borderColor": "color-warning-transparent-active-border",
                                        "backgroundColor": "color-warning-transparent-active",
                                        "textColor": "text-warning-color",
                                        "iconTintColor": "text-warning-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-warning-transparent-disabled-border",
                                        "backgroundColor": "color-warning-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "danger": {
                                "borderColor": "color-danger-transparent-default-border",
                                "backgroundColor": "color-danger-transparent-default",
                                "textColor": "text-danger-color",
                                "iconTintColor": "text-danger-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-danger-transparent-focus-border",
                                        "backgroundColor": "color-danger-transparent-focus",
                                        "textColor": "text-danger-color",
                                        "iconTintColor": "text-danger-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-danger-transparent-hover-border",
                                        "backgroundColor": "color-danger-transparent-hover",
                                        "textColor": "text-danger-color",
                                        "iconTintColor": "text-danger-color"
                                    },
                                    "active": {
                                        "borderColor": "color-danger-transparent-active-border",
                                        "backgroundColor": "color-danger-transparent-active",
                                        "textColor": "text-danger-color",
                                        "iconTintColor": "text-danger-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-danger-transparent-disabled-border",
                                        "backgroundColor": "color-danger-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "control": {
                                "borderColor": "color-control-transparent-default-border",
                                "backgroundColor": "color-control-transparent-default",
                                "textColor": "text-control-color",
                                "iconTintColor": "text-control-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-control-transparent-focus-border",
                                        "backgroundColor": "color-control-transparent-focus",
                                        "textColor": "text-control-color",
                                        "iconTintColor": "text-control-color"
                                    },
                                    "hover": {
                                        "borderColor": "color-control-transparent-hover-border",
                                        "backgroundColor": "color-control-transparent-hover",
                                        "textColor": "text-control-color",
                                        "iconTintColor": "text-control-color"
                                    },
                                    "active": {
                                        "borderColor": "color-control-transparent-active-border",
                                        "backgroundColor": "color-control-transparent-active",
                                        "textColor": "text-control-color",
                                        "iconTintColor": "text-control-color"
                                    },
                                    "disabled": {
                                        "borderColor": "color-control-transparent-disabled-border",
                                        "backgroundColor": "color-control-transparent-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            }
                        }
                    }
                },
                "ghost": {
                    "mapping": {},
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-hint-color",
                                "iconTintColor": "text-hint-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "transparent",
                                        "textColor": "text-hint-color",
                                        "iconTintColor": "text-hint-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-hint-color",
                                        "iconTintColor": "text-hint-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-hint-color",
                                        "iconTintColor": "text-hint-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "primary": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-primary-color",
                                "iconTintColor": "text-primary-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-500",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-primary-color",
                                        "iconTintColor": "text-primary-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-primary-color",
                                        "iconTintColor": "text-primary-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-primary-color",
                                        "iconTintColor": "text-primary-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "success": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-success-color",
                                "iconTintColor": "text-success-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-500",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-success-color",
                                        "iconTintColor": "text-success-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-success-color",
                                        "iconTintColor": "text-success-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-success-color",
                                        "iconTintColor": "text-success-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "info": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-info-color",
                                "iconTintColor": "text-info-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-500",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "warning": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-warning-color",
                                "iconTintColor": "text-warning-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-500",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-info-color",
                                        "iconTintColor": "text-info-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-warning-color",
                                        "iconTintColor": "text-warning-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-warning-color",
                                        "iconTintColor": "text-warning-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "danger": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-danger-color",
                                "iconTintColor": "text-danger-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-500",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-danger-color",
                                        "iconTintColor": "text-danger-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-danger-color",
                                        "iconTintColor": "text-danger-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-danger-color",
                                        "iconTintColor": "text-danger-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "control": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "textColor": "text-control-color",
                                "iconTintColor": "text-control-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-transparent-500",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-control-color",
                                        "iconTintColor": "text-control-color"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-100",
                                        "textColor": "text-control-color",
                                        "iconTintColor": "text-control-color"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-control-color",
                                        "iconTintColor": "text-control-color"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "color-basic-transparent-200",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            }
                        },
                        "size": {
                            "medium": {
                                "minWidth": 0,
                                "minHeight": 20,
                                "iconWidth": 12,
                                "iconHeight": 12,
                                "paddingHorizontal": 5,
                                "paddingVertical": 5,
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "textMarginHorizontal": 2,
                                "textFontSize": 12,
                                "textFontWeight": "normal",
                                "iconMarginHorizontal": 0
                            }
                        }
                    }
                },
                "imageButton": {
                    "mapping": {
                        "textFontFamily": "text-font-family",
                        "iconMarginHorizontal": 4
                    },
                    "variantGroups": {
                        "status": {
                            "primary": {
                                "borderColor": "#FFF5D8",
                                "backgroundColor": "#FFF5D8"
                            }
                        },
                        "size": {
                            "medium": {
                                "minWidth": 67,
                                "minHeight": 67,
                                "iconWidth": 50,
                                "iconHeight": 50,
                                "paddingHorizontal": 0,
                                "paddingVertical": 0
                            }
                        }
                    }
                },
                "bannerButton": {
                    "mapping": {
                        "textFontFamily": "text-font-family",
                        "iconMarginHorizontal": 4
                    },
                    "variantGroups": {
                        "status": {
                            "primary": {
                                "borderColor": "transparent",
                                "backgroundColor": "transparent",
                                "state": {
                                    "focused": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "transparent"
                                    },
                                    "hover": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "transparent"
                                    },
                                    "active": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "transparent"
                                    },
                                    "disabled": {
                                        "borderColor": "transparent",
                                        "backgroundColor": "transparent",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            }
                        },
                        "size": {
                            "medium": {
                                "minWidth": "100%",
                                "minHeight": 66
                            }
                        }
                    }
                },
                "labelButton": {
                    "mapping": {
                        "textFontFamily": "text-font-family",
                        "iconMarginHorizontal": 4
                    },
                    "variantGroups": {
                        "status": {
                            "primary": {}
                        },
                        "size": {
                            "medium": {
                                "textFontSize": 10
                            }
                        }
                    }
                },
                "classification": {
                    "mapping": {
                        "textFontFamily": "text-font-family",
                        "iconMarginHorizontal": 4
                    },
                    "variantGroups": {
                        "size": {
                            "medium": {
                                "minWidth": 33,
                                "minHeight": 33,
                                "textFontSize": 10,
                                "paddingHorizontal": 6,
                                "paddingVertical": 6,
                                "textMarginHorizontal": 0
                            }
                        }
                    }
                },
                "badge": {
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "borderColor": "color-basic-default-border",
                                "backgroundColor": "color-basic-default",
                                "textColor": "color-basic-800",
                                "iconTintColor": "color-basic-800",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-basic-focus-border",
                                        "backgroundColor": "color-basic-focus"
                                    },
                                    "hover": {
                                        "borderColor": "color-basic-hover-border",
                                        "backgroundColor": "color-basic-hover"
                                    },
                                    "active": {
                                        "borderColor": "color-basic-active-border",
                                        "backgroundColor": "color-basic-active"
                                    },
                                    "disabled": {
                                        "borderColor": "color-basic-disabled-border",
                                        "backgroundColor": "color-basic-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "primary": {
                                "borderColor": "#F8ECD6",
                                "backgroundColor": "#F8ECD6",
                                "textColor": "#FFC21C",
                                "iconTintColor": "#FFC21C",
                                "state": {
                                    "focused": {
                                        "borderColor": "rgba(248,236,214,0.8)",
                                        "backgroundColor": "rgba(248,236,214,0.8)"
                                    },
                                    "hover": {
                                        "borderColor": "rgba(248,236,214,0.8)",
                                        "backgroundColor": "rgba(248,236,214,0.8)"
                                    },
                                    "active": {
                                        "borderColor": "rgba(248,236,214,0.8)",
                                        "backgroundColor": "rgba(248,236,214,0.8)"
                                    },
                                    "disabled": {
                                        "borderColor": "color-primary-disabled-border",
                                        "backgroundColor": "color-primary-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "success": {
                                "borderColor": "color-success-default-border",
                                "backgroundColor": "color-success-default",
                                "textColor": "text-control-color",
                                "iconTintColor": "text-control-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-success-focus-border",
                                        "backgroundColor": "color-success-focus"
                                    },
                                    "hover": {
                                        "borderColor": "color-success-hover-border",
                                        "backgroundColor": "color-success-hover"
                                    },
                                    "active": {
                                        "borderColor": "color-success-active-border",
                                        "backgroundColor": "color-success-active"
                                    },
                                    "disabled": {
                                        "borderColor": "color-success-disabled-border",
                                        "backgroundColor": "color-success-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "info": {
                                "borderColor": "color-info-transparent-300",
                                "backgroundColor": "color-info-transparent-300",
                                "textColor": "#B5B5B5",
                                "iconTintColor": "#B5B5B5",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-info-transparent-200",
                                        "backgroundColor": "color-info-transparent-200"
                                    },
                                    "hover": {
                                        "borderColor": "color-info-transparent-200",
                                        "backgroundColor": "color-info-transparent-200"
                                    },
                                    "active": {
                                        "borderColor": "color-info-transparent-200",
                                        "backgroundColor": "color-info-transparent-200"
                                    },
                                    "disabled": {
                                        "borderColor": "color-info-disabled-border",
                                        "backgroundColor": "color-info-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "warning": {
                                "borderColor": "color-primary-default-border",
                                "backgroundColor": "color-primary-default",
                                "textColor": "text-control-color",
                                "iconTintColor": "text-control-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-primary-focus-border",
                                        "backgroundColor": "color-primary-focus"
                                    },
                                    "hover": {
                                        "borderColor": "color-primary-hover-border",
                                        "backgroundColor": "color-primary-hover"
                                    },
                                    "active": {
                                        "borderColor": "color-primary-active-border",
                                        "backgroundColor": "color-primary-active"
                                    },
                                    "disabled": {
                                        "borderColor": "color-primary-disabled-border",
                                        "backgroundColor": "color-primary-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "danger": {
                                "borderColor": "color-danger-default-border",
                                "backgroundColor": "color-danger-default",
                                "textColor": "text-control-color",
                                "iconTintColor": "text-control-color",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-danger-focus-border",
                                        "backgroundColor": "color-danger-focus"
                                    },
                                    "hover": {
                                        "borderColor": "color-danger-hover-border",
                                        "backgroundColor": "color-danger-hover"
                                    },
                                    "active": {
                                        "borderColor": "color-danger-active-border",
                                        "backgroundColor": "color-danger-active"
                                    },
                                    "disabled": {
                                        "borderColor": "color-danger-disabled-border",
                                        "backgroundColor": "color-danger-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            },
                            "control": {
                                "borderColor": "color-control-default-border",
                                "backgroundColor": "color-control-default",
                                "textColor": "color-basic-800",
                                "iconTintColor": "color-basic-800",
                                "state": {
                                    "focused": {
                                        "borderColor": "color-control-focus-border",
                                        "backgroundColor": "color-control-focus"
                                    },
                                    "hover": {
                                        "borderColor": "color-control-hover-border",
                                        "backgroundColor": "color-control-hover"
                                    },
                                    "active": {
                                        "borderColor": "color-control-active-border",
                                        "backgroundColor": "color-control-active"
                                    },
                                    "disabled": {
                                        "borderColor": "color-control-disabled-border",
                                        "backgroundColor": "color-control-disabled",
                                        "textColor": "text-disabled-color",
                                        "iconTintColor": "text-disabled-color"
                                    }
                                }
                            }
                        },
                        "size": {
                            "medium": {
                                "minWidth": 50,
                                "minHeight": 25,
                                "borderRadius": "border-radius",
                                "borderWidth": "border-width",
                                "paddingHorizontal": 10,
                                "paddingVertical": 7,
                                "textMarginHorizontal": 0,
                                "textFontSize": 12,
                                "textFontWeight": "normal",
                                "iconWidth": 20,
                                "iconHeight": 20,
                                "iconMarginHorizontal": 0
                            }
                        }
                    }
                }
            }
        },
        "Card": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "backgroundColor": {
                        "type": "string"
                    },
                    "borderRadius": {
                        "type": "number"
                    },
                    "borderColor": {
                        "type": "string"
                    },
                    "borderWidth": {
                        "type": "number"
                    },
                    "bodyPaddingHorizontal": {
                        "type": "number"
                    },
                    "bodyPaddingVertical": {
                        "type": "number"
                    },
                    "headerPaddingHorizontal": {
                        "type": "number"
                    },
                    "headerPaddingVertical": {
                        "type": "number"
                    },
                    "footerPaddingHorizontal": {
                        "type": "number"
                    },
                    "footerPaddingVertical": {
                        "type": "number"
                    },
                    "accentBackgroundColor": {
                        "type": "string"
                    },
                    "accentHeight": {
                        "type": "number"
                    }
                },
                "appearances": {
                    "filled": {
                        "default": false
                    },
                    "outline": {
                        "default": true
                    }
                },
                "variantGroups": {
                    "status": {
                        "basic": {
                            "default": false
                        },
                        "primary": {
                            "default": false
                        },
                        "success": {
                            "default": false
                        },
                        "info": {
                            "default": false
                        },
                        "warning": {
                            "default": false
                        },
                        "danger": {
                            "default": false
                        },
                        "control": {
                            "default": false
                        }
                    },
                    "direction": {
                        "horizontal": {
                            "default": true
                        },
                        "vertical": {
                            "default": false
                        }
                    }
                },
                "states": {
                    "active": {
                        "default": false,
                        "priority": 0,
                        "scope": "all"
                    }
                }
            },
            "appearances": {
                "outline": {
                    "mapping": {
                        "backgroundColor": "background-basic-color-1",
                        "borderRadius": "border-radius",
                        "borderColor": "border-basic-color-4",
                        "borderWidth": 1,
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 24,
                        "bodyPaddingVertical": 16,
                        "headerPaddingHorizontal": 24,
                        "headerPaddingVertical": 16,
                        "footerPaddingHorizontal": 24,
                        "footerPaddingVertical": 16,
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        }
                    }
                },
                "filled": {
                    "mapping": {
                        "backgroundColor": "transparent",
                        "borderWidth": 0,
                        "accentBackgroundColor": "#eee",
                        "accentHeight": 7,
                        "state": {
                            "active": {
                                "backgroundColor": "transparent"
                            }
                        }
                    }
                },
                "headFilled": {
                    "mapping": {
                        "backgroundColor": "transparent",
                        "borderWidth": 0,
                        "accentBackgroundColor": "#eee",
                        "accentHeight": 7,
                        "bodyPaddingHorizontal": 50,
                        "bodyPaddingVertical": 20,
                        "headerPaddingHorizontal": 50,
                        "headerPaddingVertical": 20,
                        "footerPaddingHorizontal": 50,
                        "footerPaddingVertical": 20,
                        "state": {
                            "active": {
                                "backgroundColor": "transparent"
                            }
                        }
                    }
                },
                "formFilled": {
                    "mapping": {
                        "backgroundColor": "transparent",
                        "borderWidth": 0,
                        "accentBackgroundColor": "#eee",
                        "accentHeight": 7,
                        "bodyPaddingHorizontal": 15,
                        "bodyPaddingVertical": 10,
                        "headerPaddingHorizontal": 15,
                        "headerPaddingVertical": 10,
                        "footerPaddingHorizontal": 15,
                        "footerPaddingVertical": 10,
                        "state": {
                            "active": {
                                "backgroundColor": "transparent"
                            }
                        }
                    }
                },
                "modalCrad": {
                    "mapping": {
                        "bodyPaddingHorizontal": 10,
                        "bodyPaddingVertical": 10,
                        "headerPaddingHorizontal": 10,
                        "headerPaddingVertical": 10,
                        "footerPaddingHorizontal": 10,
                        "footerPaddingVertical": 10
                    }
                },
                "diaogOutline": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 24,
                        "bodyPaddingVertical": 10,
                        "headerPaddingHorizontal": 24,
                        "headerPaddingVertical": 20,
                        "footerPaddingHorizontal": 24,
                        "footerPaddingVertical": 15,
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        }
                    }
                },
                "headerList": {
                    "mapping": {
                        "backgroundColor": "transparent",
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 15,
                        "bodyPaddingVertical": 10,
                        "headerPaddingHorizontal": 15,
                        "headerPaddingVertical": 0,
                        "footerPaddingHorizontal": 15,
                        "footerPaddingVertical": 0,
                        "borderColor": "transparent",
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        }
                    }
                },
                "goodsCard": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 13,
                        "bodyPaddingVertical": 20,
                        "borderColor": "transparent",
                        "borderRadius": 3,
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        },
                        "direction": {
                            "vertical": {
                                "bodyPaddingHorizontal": 0,
                                "bodyPaddingVertical": 0
                            }
                        }
                    }
                },
                "classification": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 10,
                        "bodyPaddingVertical": 5,
                        "borderColor": "transparent",
                        "borderRadius": 3,
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        },
                        "direction": {
                            "vertical": {
                                "bodyPaddingHorizontal": 0,
                                "bodyPaddingVertical": 0
                            }
                        }
                    }
                },
                "homeCard": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 10,
                        "bodyPaddingVertical": 10,
                        "borderRadius": 3,
                        "headerPaddingVertical": 0,
                        "footerPaddingVertical": 0
                    }
                },
                "homePage1Card": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 15,
                        "bodyPaddingVertical": 0,
                        "borderRadius": 3,
                        "headerPaddingVertical": 10,
                        "headerPaddingHorizontal": 15,
                        "footerPaddingVertical": 5,
                        "borderWidth": 0
                    }
                },
                "CommentCard": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 13,
                        "bodyPaddingVertical": 0,
                        "borderColor": "transparent",
                        "borderRadius": 3,
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        },
                        "direction": {
                            "vertical": {
                                "bodyPaddingHorizontal": 0,
                                "bodyPaddingVertical": 0
                            }
                        }
                    }
                },
                "orderCard": {
                    "mapping": {
                        "accentHeight": 0,
                        "bodyPaddingHorizontal": 13,
                        "bodyPaddingVertical": 20,
                        "borderColor": "transparent",
                        "borderRadius": 3,
                        "footerPaddingHorizontal": 13,
                        "footerPaddingVertical": 10,
                        "state": {
                            "active": {
                                "backgroundColor": "background-basic-color-2"
                            }
                        }
                    },
                    "variantGroups": {
                        "status": {
                            "basic": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-basic-default"
                            },
                            "primary": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-primary-default"
                            },
                            "success": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-success-default"
                            },
                            "info": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-info-default"
                            },
                            "warning": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-warning-default"
                            },
                            "danger": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-danger-default"
                            },
                            "control": {
                                "accentHeight": 4,
                                "accentBackgroundColor": "color-control-default"
                            }
                        },
                        "direction": {
                            "vertical": {
                                "bodyPaddingHorizontal": 0,
                                "bodyPaddingVertical": 0
                            }
                        }
                    }
                }
            }
        },
        "SelectOption": {
            "appearances": {
                "default": {
                    "mapping": {
                        "paddingHorizontal": 8,
                        "paddingVertical": 12,
                        "backgroundColor": "background-basic-color-1",
                        "textMarginHorizontal": 8,
                        "textFontSize": "text-subtitle-1-font-size",
                        "textFontWeight": "text-subtitle-1-font-weight",
                        "textFontFamily": "text-subtitle-1-font-family",
                        "textColor": "text-basic-color",
                        "iconWidth": 20,
                        "iconHeight": 20,
                        "iconMarginHorizontal": 8,
                        "iconTintColor": "text-hint-color",
                        "state": {
                            "hover": {
                                "iconTintColor": "text-primary-hover-color",
                                "backgroundColor": "color-basic-transparent-hover"
                            },
                            "active": {
                                "backgroundColor": "color-basic-transparent-active"
                            },
                            "selected": {
                                "backgroundColor": "color-primary-transparent-default",
                                "textColor": "text-basic-color",
                                "iconTintColor": "text-primary-color"
                            },
                            "selected.hover": {
                                "background-color": "color-primary-transparent-100",
                                "textColor": "text-basic-color"
                            },
                            "disabled": {
                                "backgroundColor": "background-basic-color-1",
                                "textColor": "text-disabled-color",
                                "iconTintColor": "text-disabled-color"
                            }
                        }
                    }
                },
                "grouped": {
                    "mapping": {
                        "paddingLeft": 16
                    }
                },
                "form": {
                    "mapping": {
                        "paddingVertical": 5,
                        "textFontSize": "text-subtitle-2-font-size"
                    }
                }
            }
        },
        "MenuItem": {
            "appearances": {
                "default": {
                    "mapping": {
                        "paddingHorizontal": 8,
                        "paddingVertical": 12,
                        "backgroundColor": "background-basic-color-1",
                        "indicatorWidth": 0,
                        "indicatorBackgroundColor": "transparent",
                        "titleMarginHorizontal": 8,
                        "titleFontSize": "text-subtitle-2-font-size",
                        "titleFontWeight": "text-subtitle-2-font-weight",
                        "titleFontFamily": "text-subtitle-2-font-family",
                        "titleColor": "text-basic-color",
                        "iconWidth": 20,
                        "iconHeight": 20,
                        "iconMarginHorizontal": 8,
                        "iconTintColor": "text-hint-color",
                        "state": {
                            "hover": {
                                "titleColor": "text-primary-hover-color",
                                "iconTintColor": "text-primary-hover-color"
                            },
                            "active": {
                                "backgroundColor": "color-basic-transparent-active"
                            },
                            "selected": {
                                "backgroundColor": "color-primary-transparent-default",
                                "indicatorWidth": 4,
                                "indicatorBackgroundColor": "color-primary-default",
                                "titleColor": "text-primary-color",
                                "iconTintColor": "text-primary-color"
                            },
                            "disabled": {
                                "titleColor": "text-disabled-color",
                                "iconTintColor": "text-disabled-color"
                            }
                        }
                    }
                },
                "grouped": {
                    "mapping": {
                        "paddingLeft": 16
                    }
                },
                "cardContent": {
                    "mapping": {
                        "paddingHorizontal": 0
                    }
                },
                "orderProduct": {
                    "mapping": {
                        "paddingHorizontal": 0,
                        "paddingVertical": 2,
                        "backgroundColor": "background-basic-color-1",
                        "indicatorWidth": 0,
                        "indicatorBackgroundColor": "transparent",
                        "titleMarginHorizontal": 0,
                        "titleFontSize": "text-label-font-size",
                        "titleFontWeight": "text-subtitle-2-font-weight",
                        "titleFontFamily": "text-subtitle-2-font-family",
                        "titleColor": "text-basic-color",
                        "iconWidth": 12,
                        "iconHeight": 12,
                        "iconMarginHorizontal": 8,
                        "iconTintColor": "text-hint-color"
                    }
                }
            }
        },
        "TopNavigation": {
            "meta": {
                "scope": "mobile",
                "parameters": {
                    "minHeight": {
                        "type": "number"
                    },
                    "paddingVertical": {
                        "type": "number"
                    },
                    "paddingHorizontal": {
                        "type": "number"
                    },
                    "backgroundColor": {
                        "type": "string"
                    },
                    "titleTextAlign": {
                        "type": "string"
                    },
                    "titleFontFamily": {
                        "type": "string"
                    },
                    "titleFontSize": {
                        "type": "number"
                    },
                    "titleFontWeight": {
                        "type": "string"
                    },
                    "titleColor": {
                        "type": "string"
                    },
                    "subtitleTextAlign": {
                        "type": "string"
                    },
                    "subtitleFontFamily": {
                        "type": "string"
                    },
                    "subtitleFontSize": {
                        "type": "number"
                    },
                    "subtitleFontWeight": {
                        "type": "string"
                    },
                    "subtitleColor": {
                        "type": "string"
                    }
                },
                "appearances": {
                    "default": {
                        "default": true
                    },
                    "control": {
                        "default": false
                    }
                },
                "variantGroups": {
                    "alignment": {
                        "start": {
                            "default": true
                        },
                        "center": {
                            "default": false
                        }
                    }
                },
                "states": {}
            },
            "appearances": {
                "default": {
                    "mapping": {
                        "minHeight": 56,
                        "paddingVertical": 8,
                        "paddingHorizontal": 8,
                        "backgroundColor": "color-primary-500",
                        "titleColor": "#fff",
                        "iconTintColor": "#fff"
                    },
                    "variantGroups": {
                        "alignment": {
                            "start": {
                                "titleTextAlign": "left",
                                "subtitleTextAlign": "left"
                            },
                            "center": {
                                "titleTextAlign": "center",
                                "subtitleTextAlign": "center"
                            }
                        }
                    }
                },
                "control": {
                    "mapping": {
                        "backgroundColor": "transparent"
                    }
                },
                "homeBar": {
                    "mapping": {
                        "minHeight": 56,
                        "paddingVertical": 8,
                        "paddingHorizontal": 8,
                        "backgroundColor": "#fff",
                        "titleColor": "#000000",
                        "iconTintColor": "#000000"
                    }
                }
            }
        },
        "Text": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "fontFamily": {
                        "type": "string"
                    },
                    "fontSize": {
                        "type": "number"
                    },
                    "fontWeight": {
                        "type": "string"
                    },
                    "color": {
                        "type": "string"
                    }
                },
                "appearances": {
                    "default": {
                        "default": true
                    },
                    "alternative": {
                        "default": false
                    },
                    "hint": {
                        "default": false
                    }
                },
                "variantGroups": {
                    "category": {
                        "h1": {
                            "default": false
                        },
                        "h2": {
                            "default": false
                        },
                        "h3": {
                            "default": false
                        },
                        "h4": {
                            "default": false
                        },
                        "h5": {
                            "default": false
                        },
                        "h6": {
                            "default": false
                        },
                        "s1": {
                            "default": false
                        },
                        "s2": {
                            "default": false
                        },
                        "p1": {
                            "default": true
                        },
                        "p2": {
                            "default": false
                        },
                        "c1": {
                            "default": false
                        },
                        "c2": {
                            "default": false
                        }
                    },
                    "status": {
                        "basic": {
                            "default": false
                        },
                        "primary": {
                            "default": false
                        },
                        "success": {
                            "default": false
                        },
                        "info": {
                            "default": false
                        },
                        "warning": {
                            "default": false
                        },
                        "danger": {
                            "default": false
                        },
                        "control": {
                            "default": false
                        }
                    }
                },
                "states": {}
            },
            "appearances": {
                "default": {
                    "mapping": {
                        "color": "text-basic-color"
                    },
                    "variantGroups": {
                        "category": {
                            "h1": {
                                "fontSize": "text-label-font-size",
                                "fontWeight": "text-label-font-weight",
                                "fontFamily": "text-heading-1-font-family"
                            },
                            "h2": {
                                "fontSize": "text-heading-2-font-size",
                                "fontWeight": "text-heading-2-font-weight",
                                "fontFamily": "text-heading-2-font-family"
                            },
                            "h3": {
                                "fontSize": "text-heading-3-font-size",
                                "fontWeight": "text-heading-3-font-weight",
                                "fontFamily": "text-heading-3-font-family"
                            },
                            "h4": {
                                "fontSize": "text-heading-4-font-size",
                                "fontWeight": "text-heading-4-font-weight",
                                "fontFamily": "text-heading-4-font-family"
                            },
                            "h5": {
                                "fontSize": "text-heading-5-font-size",
                                "fontWeight": "text-heading-5-font-weight",
                                "fontFamily": "text-heading-5-font-family"
                            },
                            "h6": {
                                "fontSize": "text-heading-6-font-size",
                                "fontWeight": "text-heading-6-font-weight",
                                "fontFamily": "text-heading-6-font-family"
                            },
                            "s1": {
                                "fontSize": "text-subtitle-1-font-size",
                                "fontWeight": "text-subtitle-1-font-weight",
                                "fontFamily": "text-subtitle-1-font-family"
                            },
                            "s2": {
                                "fontSize": "text-subtitle-2-font-size",
                                "fontWeight": "text-subtitle-2-font-weight",
                                "fontFamily": "text-subtitle-2-font-family"
                            },
                            "p1": {
                                "fontSize": "text-paragraph-1-font-size",
                                "fontWeight": "text-paragraph-1-font-weight",
                                "fontFamily": "text-paragraph-1-font-family"
                            },
                            "p2": {
                                "fontSize": "text-paragraph-2-font-size",
                                "fontWeight": "text-paragraph-2-font-weight",
                                "fontFamily": "text-paragraph-2-font-family"
                            },
                            "c1": {
                                "fontSize": "text-caption-1-font-size",
                                "fontWeight": "text-caption-1-font-weight",
                                "fontFamily": "text-caption-1-font-family"
                            },
                            "c2": {
                                "fontSize": "text-caption-2-font-size",
                                "fontWeight": "text-caption-2-font-weight",
                                "fontFamily": "text-caption-2-font-family"
                            }
                        },
                        "status": {
                            "basic": {
                                "color": "text-basic-color"
                            },
                            "primary": {
                                "color": "text-primary-color"
                            },
                            "success": {
                                "color": "text-success-color"
                            },
                            "info": {
                                "color": "#B5B5B5"
                            },
                            "warning": {
                                "color": "text-warning-color"
                            },
                            "danger": {
                                "color": "text-danger-color"
                            },
                            "control": {
                                "color": "text-control-color"
                            }
                        }
                    }
                },
                "alternative": {
                    "mapping": {
                        "color": "text-alternate-color"
                    }
                },
                "hint": {
                    "mapping": {
                        "color": "text-hint-color"
                    }
                }
            }
        },
        "Tab": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "textFontFamily": {
                        "type": "string"
                    },
                    "textFontSize": {
                        "type": "number"
                    },
                    "textFontWeight": {
                        "type": "number"
                    },
                    "textMarginVertical": {
                        "type": "number"
                    },
                    "textColor": {
                        "type": "string"
                    },
                    "iconWidth": {
                        "type": "number"
                    },
                    "iconHeight": {
                        "type": "number"
                    },
                    "iconMarginVertical": {
                        "type": "number"
                    },
                    "iconTintColor": {
                        "type": "string"
                    }
                },
                "appearances": {
                    "default": {
                        "default": true
                    }
                },
                "variantGroups": {},
                "states": {
                    "selected": {
                        "default": false,
                        "priority": 0,
                        "scope": "all"
                    },
                    "hover": {
                        "default": false,
                        "priority": 1,
                        "scope": "all"
                    },
                    "focused": {
                        "default": false,
                        "priority": 2,
                        "scope": "all"
                    }
                }
            },
            "appearances": {
                "default": {
                    "mapping": {
                        "textMarginVertical": 2,
                        "textFontSize": 14,
                        "textFontWeight": "bold",
                        "textFontFamily": "text-font-family",
                        "textColor": "text-hint-color",
                        "iconWidth": 24,
                        "iconHeight": 24,
                        "iconMarginVertical": 2,
                        "iconTintColor": "text-hint-color",
                        "state": {
                            "hover": {
                                "textColor": "text-primary-hover-color",
                                "iconTintColor": "text-primary-hover-color"
                            },
                            "selected": {
                                "textColor": "text-primary-color",
                                "iconTintColor": "text-primary-color"
                            }
                        }
                    }
                },
                "homeTab": {
                    "mapping": {
                        "textMarginVertical": 5,
                        "textFontSize": 15,
                        "textFontWeight": "blod",
                        "textFontFamily": "text-font-family",
                        "textColor": "#000",
                        "iconWidth": 24,
                        "iconHeight": 24,
                        "iconMarginVertical": 8,
                        "iconTintColor": "#000",
                        "state": {
                            "hover": {
                                "textColor": "#000",
                                "iconTintColor": "text-primary-hover-color"
                            },
                            "selected": {
                                "textColor": "#000",
                                "iconTintColor": "text-primary-color"
                            }
                        }
                    }
                }
            }
        },
        "TabBar": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "paddingVertical": {
                        "type": "number"
                    },
                    "backgroundColor": {
                        "type": "string"
                    },
                    "indicatorHeight": {
                        "type": "number"
                    },
                    "indicatorBorderRadius": {
                        "type": "number"
                    },
                    "indicatorBackgroundColor": {
                        "type": "string"
                    }
                },
                "appearances": {
                    "default": {
                        "default": true
                    }
                },
                "variantGroups": {},
                "states": {}
            },
            "appearances": {
                "default": {
                    "mapping": {
                        "paddingVertical": 4,
                        "backgroundColor": "background-basic-color-1",
                        "indicatorHeight": 4,
                        "indicatorBorderRadius": 2,
                        "indicatorBackgroundColor": "color-primary-default"
                    }
                },
                "homeTab": {
                    "mapping": {
                        "paddingVertical": 4,
                        "backgroundColor": "transparent",
                        "indicatorHeight": 4,
                        "indicatorBorderRadius": 2,
                        "indicatorBackgroundColor": "transparent"
                    }
                }
            }
        },
        "ListItem": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "paddingVertical": {
                        "type": "number"
                    },
                    "paddingHorizontal": {
                        "type": "number"
                    },
                    "backgroundColor": {
                        "type": "string"
                    },
                    "iconWidth": {
                        "type": "number"
                    },
                    "iconHeight": {
                        "type": "number"
                    },
                    "iconMarginHorizontal": {
                        "type": "number"
                    },
                    "iconTintColor": {
                        "type": "string"
                    },
                    "titleMarginHorizontal": {
                        "type": "number"
                    },
                    "titleFontFamily": {
                        "type": "string"
                    },
                    "titleFontSize": {
                        "type": "number"
                    },
                    "titleFontWeight": {
                        "type": "string"
                    },
                    "titleColor": {
                        "type": "string"
                    },
                    "descriptionColor": {
                        "type": "string"
                    },
                    "descriptionFontFamily": {
                        "type": "string"
                    },
                    "descriptionFontSize": {
                        "type": "number"
                    },
                    "descriptionFontWeight": {
                        "type": "string"
                    },
                    "descriptionMarginHorizontal": {
                        "type": "number"
                    },
                    "accessoryMarginHorizontal": {
                        "type": "number"
                    },
                    "alignItems": {
                        "type": "String"
                    }
                },
                "appearances": {
                    "default": {
                        "default": true
                    }
                },
                "variantGroups": {},
                "states": {
                    "active": {
                        "default": false,
                        "priority": 0,
                        "scope": "all"
                    }
                }
            },
            "appearances": {
                "default": {
                    "mapping": {
                        "paddingHorizontal": 8,
                        "paddingVertical": 12,
                        "backgroundColor": "background-basic-color-1",
                        "iconWidth": 24,
                        "iconHeight": 24,
                        "iconMarginHorizontal": 8,
                        "iconTintColor": "text-hint-color",
                        "titleMarginHorizontal": 8,
                        "titleFontSize": "text-subtitle-2-font-size",
                        "titleFontWeight": "text-subtitle-2-font-weight",
                        "titleFontFamily": "text-subtitle-2-font-family",
                        "titleColor": "text-basic-color",
                        "descriptionMarginHorizontal": 8,
                        "descriptionFontSize": "text-caption-1-font-size",
                        "descriptionFontWeight": "text-caption-1-font-weight",
                        "descriptionFontFamily": "text-caption-1-font-family",
                        "descriptionColor": "text-hint-color",
                        "accessoryMarginHorizontal": 8,
                        "state": {
                            "active": {
                                "backgroundColor": "color-basic-transparent-active"
                            }
                        }
                    }
                },
                "classification": {
                    "mapping": {
                        "paddingHorizontal": 8,
                        "paddingVertical": 12,
                        "backgroundColor": "transparent",
                        "iconWidth": 24,
                        "iconHeight": 24,
                        "iconMarginHorizontal": 8,
                        "iconTintColor": "text-hint-color",
                        "titleMarginHorizontal": 8,
                        "titleFontSize": "text-subtitle-2-font-size",
                        "titleFontWeight": "text-subtitle-2-font-weight",
                        "titleFontFamily": "text-subtitle-2-font-family",
                        "titleColor": "text-basic-color",
                        "descriptionMarginHorizontal": 8,
                        "descriptionFontSize": "text-caption-1-font-size",
                        "descriptionFontWeight": "text-caption-1-font-weight",
                        "descriptionFontFamily": "text-caption-1-font-family",
                        "descriptionColor": "text-hint-color",
                        "accessoryMarginHorizontal": 8,
                        "alignItems": "center",
                        "state": {
                            "active": {
                                "backgroundColor": "color-basic-transparent-active"
                            }
                        }
                    }
                }
            }
        }
    }
}