// Table of Contents // ================================================== // Animation // Color // Common // Font // Grid // Progress // Animation // ================================================== $animation-delays: ( xxl: 2s, xl: 1.75s, l: 1.5s, m: 1.25s, b: 1s, s: 0.75s, xs: 0.5s, xxs: 0.25s, n: 0 ); $animation-durations: ( xxl: 2s, xl: 1.75s, l: 1.5s, m: 1.25s, b: 1s, s: 0.75s, xs: 0.5s, xxs: 0.25s ); // Color // ================================================== $colors-brand: ( 'lime': rgba(161,215,77,1), 'green': rgba(27,185,51,1), 'teal': rgba(46,207,221,1), 'sky': rgba(0,170,255,1), 'blue': rgba(13,134,246,1), 'indigo': rgba(126,99,226,1), 'purple': rgba(186,91,206,1), 'pink': rgba(239,76,136,1), 'red': rgba(235,60,34,1), 'brown': rgba(133,97,25,1), 'orange': rgba(253,163,13,1), 'yellow': rgba(246,209,35,1) ); $colors-grayscale: ( 'transparent': rgba(0,0,0,0), 'dark-black': rgba(37,49,62,1), 'black': rgba(44,58,73,1), 'light-black': rgba(51,67,83,1), 'dark-gray': rgba(110,128,150,1), 'gray': rgba(130,146,164,1), 'light-gray': rgba(153,166,183,1), 'dark-haze': rgba(229,232,241,1), 'haze': rgba(238,240,246,1), 'light-haze': rgba(249,250,252,1), 'white': rgba(255,255,255,1) ); $colors-global: ( 'primary': map-get($colors-brand, 'blue'), 'secondary': map-get($colors-brand, 'green'), 'tertiary': map-get($colors-brand, 'red'), 'quaditiary': map-get($colors-brand, 'yellow') ); $colors: map-merge(map-merge($colors-brand, $colors-grayscale), $colors-global); $colors-black-text: 'transparent', 'dark-haze', 'haze', 'light-haze', 'white'; // Common // ================================================== $common-border-widths: ( xl: 6px, l: 3px, m: 2px, b: 1px, n: 0 ); $common-border-radiuses: ( xl: 999px, l: 10px, m: 6px, b: 3px, s: 2px, n: 0 ); $common-margins-and-paddings: ( xxxl: 100px, xxl: 80px, xl: 60px, l: 40px, m: 30px, b: 20px, s: 10px, xs: 5px, n: 0 ); $common-display-types: block, inline, inline-block, table, table-cell, table-row; $common-visibility-types: collapse, hidden, visible; // Font // ================================================== $font-families: ( monospace: (Courier, Consolas, Menlo, Monaco, monospace), sans-serif: ('Fakt Soft Pro', Verdana, Tahoma, sans-serif), serif: (Georgia, 'Times New Roman', serif) ); $font-indents: ( xxxl: 25px, xxl: 20px, xl: 15px, l: 10px, m: 5px, b: 0, s: -5px, xs: -10px, xxs: -15px, xxxs: -20px ); $font-line-heights: ( xxxl: 80px, xxl: 62px, xl: 42px, l: 32px, m: 28px, b: 26px, s: 22px, xs: 18px, xxs: 14px, xxxs: 12px, i: 1, n: 0 ); $font-sizes: ( xxxl: 56px, xxl: 42px, xl: 28px, l: 20px, m: 18px, b: 16px, s: 14px, xs: 12px, xxs: 10px, xxxs: 8px ); $font-spaces: ( xxl: 10px, xl: 6px, l: 2px, m: 1px, b: 0, s: -1px, xs: -2px ); $font-weights: ( bold: 700, semibold: 500, normal: 400, semilight: 300 ); // Grid // ================================================== $grid-column-widths: ( one: 10%, two: 20%, three: 30%, four: 40%, five: 50%, six: 60%, seven: 70%, eight: 80%, nine: 90%, ten: 100%, one-fourth: 25%, one-third: 33.33333%, one-half: 50%, two-thirds: 66.66666%, three-fourths: 75% ); $grid-container-widths: ( l: (calc(100% - 260px), 1360px), m: (calc(100% - 140px), 1180px), b: (calc(100% - 60px), 960px), s: (calc(100% - 20px), 760px), null: (100%, null) ); $grid-row-margins: ( xxxl: 100px, xxl: 80px, xl: 60px, l: 40px, m: 30px, b: 20px, s: 10px, xs: 5px, null: 0 ); $grid-container-types: container, container-fixed; $grid-row-types: row, row-responsive; // Progress // ================================================== $progress-sizes: ( l: 40px, m: 32px, b: 24px, s: 16px, xs: 8px );