stylekit/test.js

In-browser CSS generation with variable binding and live updates

var sk = require('./');

var ss = sk(1);

ss.constants({
    
    HK_MONOSPACE_FONT               : 'monospace',
    HK_TEXT_COLOR                   : '#121729',
    
    HK_CONTROL_FONT                 : 'Helvetica, sans-serif',
    HK_CONTROL_FONT_SIZE            : '10px',
    HK_CONTROL_BORDER_COLOR         : '#455366',
    HK_CONTROL_ACTIVE_BG_COLOR      : '#EAF20F',
    
    HK_BUTTON_BG_COLOR              : '#929DA8',
    
    HK_ROOT_BG_COLOR                : '#181E23',
    
    HK_CONSOLE_FONT_SIZE            : '13px',
    
    HK_DIALOG_PADDING               : '6px',
    HK_DIALOG_HEADER_HEIGHT         : '24px',
    HK_DIALOG_BORDER_RADIUS         : '$HK_DIALOG_PADDING',
    
    HK_SPLIT_PANE_DIVIDER_SIZE      : '8px',
    HK_TOOLBAR_HEIGHT               : '18px',
    HK_TOOLBAR_ITEM_BORDER_COLOR    : '#A6B5BB',

    HK_TAB_SPACING                  : '7px',
    HK_TAB_PADDING                  : '7px',
    HK_TAB_HEIGHT                   : '$HK_CONTROL_FONT_SIZE + (2 * 7px)',
    HK_TAB_BORDER_RADIUS            : '5px',
    HK_TAB_BACKGROUND_COLOR         : '#67748C',

    HK_BLOCK_BORDER_RADIUS          : '10px'

});

ss.macro('no-select', function(b) {
    b.attrib('-webkit-user-select', 'none');
    b.attrib('cursor', 'default');
});

ss.macro('small-text', function(b) {
    b.attrib('font-size', '11px');
});

ss.macro('control-font', function(b) {
    b.attrib('font', '$HK_CONTROL_FONT_SIZE/1 $HK_CONTROL_FONT');
});

ss.macro('control-border', function(b) {
    b.attrib('border', '1px solid $HK_CONTROL_BORDER_COLOR');
});

//
// HK root

var root = ss.block();

root.rule('.hk', function(b) {

    b.expand('no-select');

    b.attrib('background', '#101010');
    b.attrib('font', '12px Arial,Helvetica,sans-serif');

    b.rule('a', {
        textDecoration: 'none'
    });

    b.rule('*', function(b) {
        b.expand('no-select');
    });

});

root.rule('.widget', function(b) {

    b.attribs({
        position: 'absolute',
        overflow: 'hidden',
        boxSizing: 'border-box'
    });

});

// ss.block().rule('.hk', function() {

// }).commit();





// var b = ss.block();




// b.macro('all-color', function(b, color) {
//     b.attribs({
//         color: color,
//         backgroundColor: color,
//         borderColor: color
//     });
// });

// b.rule('.hk', function(b) {

//     b.rule('a', 'display: none');
//     b.rule('a', 'color:red');
//     b.rule('strong', 'font-weight: bold');

//     b.expand('all-color', 'green');

// });

// console.log(b.compile());