gistfile1.txt

window.button = function () {
    $('Button').each(function() {
        // Get component variables
        var size = $(this).attr('size');
        var kind = $(this).attr('kind');
        var color = $(this).attr('color');
        var value = $(this).attr('value');
        var type = $(this).attr('type');

        // Define compulsory classes
        var sharedClasses = 'display-inlineBlock va-middle appearance-none ws-noWrap os-none us-none fw-5 td-none ta-center cursor-pointer tp-all td-s ttf-ease br-m bw-0 js-componentFlatButton';

        // Define size classes
        if ( size === "large" ) {
            var sizeClasses = 'height-UIl mw-UIl lh-UIl pl-m pr-m fs-l ls-s';
        }
        else if ( size === "medium" ) {
            var sizeClasses = 'height-UIm mw-UIm lh-UIm pl-s pr-s fs-m';
        }
        else if ( size === "small" ) {
            var sizeClasses = 'height-UIs mw-UIs lh-UIs pl-xs pr-xs fs-s';
        }

        // Define kind classes
        if ( kind === "flat" ) {
            var kindClasses = 'bs-raise bs-active--hover transform-pullUp--hover';
        }
        else if ( kind === "ghost" ) {
            var kindClasses = 'bs-black--pellucid bs-blue--hover bc-none color-charcoal--hover';
        }

        // Define color classes
        if ( kind === "flat" ) {
            if ( color === "accent" ) {
                var colorClasses = 'bc-blue color-white';
            }
            else if ( color === "positive" ) {
                var colorClasses = 'bc-teal color-white';
            }
            else if ( color === "negative" ) {
                var colorClasses = 'bc-red color-white';
            }
        }
        else if ( kind === "ghost" ) {
            if ( color === "accent" ) {
                var colorClasses = 'color-blue';
            }
            else if ( color === "positive" ) {
                var colorClasses = 'color-teal';
            }
            else if ( color === "negative" ) {
                var colorClasses = 'color-red';
            }
        }

        // Define button types
        if ( type === "anchor" ) {
            var $button = "<a class='" + sharedClasses + " " + sizeClasses + " " + kindClasses + " " + colorClasses + "'>" + value + "</a>";
        }
        else if ( type === "button" ) {
            var $button = "<button class='" + sharedClasses + " " + sizeClasses + " " + kindClasses + " " + colorClasses + "' type='button'>" + value + "</button>";
        }
        else if ( type === "input" ) {
            var $button = "<input class='" + sharedClasses + " " + sizeClasses + " " + kindClasses + " " + colorClasses + "' type='submit' value='" + value + "'>";
        }

        // Render button
        $(this).replaceWith($button);
    });
}