Graphical Less File Editor

I need a single page web app, built in typescript, where a LESS file is edited as data, not as text. For each element in the less file, would see appropriate editor with validation. If its a color, would want a color picker + ability to specify color (type in box) If text size, want a number etc... Global functions to 'change similar' which would find all similar items and also adjust them (give confirmation to make sure all are done) would have save button at bottom The UI would either be - collapsable sections - a grid with sections/names/values that is sortable /*#region Portal Top Bar Colors*/ @PortalTopBarTextColor: #ffffff; @PortalTopBarActiveIconsBgColor: #ffffff; @portalTopBarBk: #FF8800; @portalBurgerShapeBk: #D97300; @portalBurgerLinesBk: #ECB980; @portalBurgerShapeBorder: #FF9F33; @portalBurgerShapeBkHover: #995100; @portalBurgerShapeBkExpanded: #995100; /*#endregion Portal Top Bar Colors*/ /*#region RVSP & Report Colors*/ @RvspHeaderBackColor: rgba(237, 246, 252, 1); @RvspHeaderBorderColor: rgba(156, 200, 230, 1); @RvspHeaderHoverBackColor: rgba(209, 240, 255, 1); @DataGridAltRow: rgba(242, 242, 242, 1); @RvspSelectedRowBackColor: rgba(219, 241, 255, 1); @RvspMultiSelectedRowsBackColor:#ffe8d1; @RvspMultiSelectedRowsTextColor: #000000; @RvspLeftIndicatorBgColor: #4d9fd6; @ReportColumnFilterTextColor: #898E92; @ReportGroupHeaderBgColor: #F7FCFF; @ReportGroupHeaderBorderColor: #d6d6d6; @ReportGroupHeaderHoveredTextColor: #1E90CA; @ReportGridTableBorderColor: rgb(194, 194, 194); @DownloadReportLinkColor: #c60; @ReportHeaderTextColor: #000; @SummaryAggregationDataColor: #999; /*#endregion end of RVSP & Report Colors*/