@dialpad/dialtone-css/lib/build/less/themes/default.less

Dialpad's design system

//
//  DIALTONE
//  THEME VARIABLES
//
//  This file contains all the theme-able portions of Dialtone.
//  For further information about these classes, please visit:
//  https://dialtone.dialpad.com/themes
//
//  ============================================================================
//  THEME VARIABLES
//  The following items are themeable items that will update the imported
//  Dialtone styles and components accordingly.
//
//  TABLE OF CONTENTS:
//    - SET VARIABLES
//      - Colors
//      - Visual Styles
//      - Theme
//    - OUTPUT VARIABLES
//
//  ============================================================================
//  $   SET VARIABLES
//  ----------------------------------------------------------------------------


@theme-vars: {
    primary-color-h:                        var(--dt-color-purple-400-h);
    primary-color-s:                        var(--dt-color-purple-400-s);
    primary-color-l:                        var(--dt-color-purple-400-l);
    primary-color-hsl:                      var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
    primary-color:                          hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
    primary-color-hover:                    hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
    nav-background-color-h:                 var(--dt-color-purple-600-h);
    nav-background-color-s:                 var(--dt-color-purple-600-s);
    nav-background-color-l:                 var(--dt-color-purple-600-l);
    nav-background-color:                   hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));

    topbar-height:                                    var(--dt-size-700);

    base--font-size:                                  var(--dt-font-size-200);
    base--font-family:                                var(--dt-font-family-body);
    base--line-height:                                var(--dt-font-line-height-300);
    base--corner-radius:                              0.25em; // TODO: unused. deprecate or...?
}

//  ============================================================================
//  $   OUTPUT VARIABLES
//  ============================================================================
body {
    //  $$  COLOR VARS
    //  ------------------------------------------------------------------------
    --bgo: 100%;                // Background color opacity
    --bco: 100%;                // Border color opacity
    --fco: 100%;                // Font color opacity

    //  $$  VISUAL STYLES
    //  ------------------------------------------------------------------------
    each(@transition, {
        --@{key}: @value;
    });
    each(@background-patterns, {
        --@{key}: @value;
    });

    //  $$  GRID
    //  ------------------------------------------------------------------------
    each(@grid-vars, {
        --@{key}: @value;
    });

    //  $$  TYPE
    //  ------------------------------------------------------------------------
    each(@type-styles-vars, {
        --@{key}: @value;
    });

    //  $$  THEME VARS
    //      These should always come last
    //  ------------------------------------------------------------------------
    each(@theme-vars, {
        --@{key}: @value;
    });
}