// Table of Contents // ================================================== // Functions // Animation // Color // Common // Font // Grid // Progress // Functions // ================================================== @function map-collect($maps...) { $collection: (); @each $map in $maps { $collection: map-merge($collection, $map); } @return $collection; } @function map-global-collect($global-collection, $global-name) { $name: map-get($colors-global, $global-name); @return map-get($global-collection, $name); } // 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-global: ( 'primary': 'blue', 'secondary': 'green', 'tertiary': 'red', 'quaditiary': 'yellow' ); $colors-brand: ( 'lime': rgba(164,217,111,1), 'green': rgba(52,208,102,1), 'teal': rgba(66,223,193,1), 'sky': rgba(19,190,255,1), 'blue': rgba(50,156,255,1), 'indigo': rgba(146,112,226,1), 'purple': rgba(194,111,212,1), 'pink': rgba(240,129,143,1), 'red': rgba(241,91,83,1), 'brown': rgba(211,143,95,1), 'orange': rgba(252,174,70,1), 'yellow': rgba(248,214,72,1) ); $colors-brand-global: ( 'primary': map-global-collect($colors-brand, 'primary'), 'secondary': map-global-collect($colors-brand, 'secondary'), 'tertiary': map-global-collect($colors-brand, 'tertiary'), 'quaditiary': map-global-collect($colors-brand, 'quaditiary') ); $colors-brand-inverted: ( 'lime': rgba(242,250,235,1), 'green': rgba(227,249,234,1), 'teal': rgba(234,251,248,1), 'sky': rgba(235,249,255,1), 'blue': rgba(227,241,255,1), 'indigo': rgba(245,242,252,1), 'purple': rgba(249,236,252,1), 'pink': rgba(253,234,236,1), 'red': rgba(253,229,228,1), 'brown': rgba(249,240,233,1), 'orange': rgba(255,242,224,1), 'yellow': rgba(254,248,223,1) ); $colors-brand-inverted-global: ( 'primary': map-global-collect($colors-brand-inverted, 'primary'), 'secondary': map-global-collect($colors-brand-inverted, 'secondary'), 'tertiary': map-global-collect($colors-brand-inverted, 'tertiary'), 'quaditiary': map-global-collect($colors-brand-inverted, 'quaditiary') ); $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(130,149,167,1), 'gray': rgba(145,162,178,1), 'light-gray': rgba(160,174,188,1), 'dark-haze': rgba(229,234,244,1), 'haze': rgba(238,241,250,1), 'light-haze': rgba(248,249,253,1), 'white': rgba(255,255,255,1) ); $colors-grayscale-inverted: ( 'transparent': rgba(0,0,0,0), 'dark-black': rgba(231,236,241,1), 'black': rgba(242,245,247,1), 'light-black': rgba(241,244,246,1), 'dark-gray': rgba(222,227,232,1), 'gray': rgba(226,230,235,1), 'light-gray': rgba(229,233,237,1), 'dark-haze': rgba(237,242,252,1), 'haze': rgba(243,246,255,1), 'light-haze': rgba(250,251,255,1), 'white': rgba(255,255,255,1) ); $colors: map-collect($colors-brand, $colors-brand-global, $colors-grayscale); $colors-inversions: map-collect($colors-brand-inverted, $colors-brand-inverted-global, $colors-grayscale-inverted); $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-box-shadows: ( xxl: 14px, xl: 10px, l: 6px, m: 4px, b: 2px ); $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-available-typography: ( branding: 'Branding', fakt-pro: 'Fakt Pro', fakt-soft-pro: 'Fakt Soft Pro', ventura-edding: 'Ventura Edding' ); $font-available-icons: ( active-icons: 'Active Icons', dripicons: 'Dripicons' ); $font-families: ( display: ('Ventura Edding', Verdana, Tahoma, sans-serif), monospace: (Courier, Consolas, Menlo, Monaco, monospace), sans-serif: ('Fakt Soft Pro', Verdana, Tahoma, sans-serif), serif: (Georgia, 'Times New Roman', serif) ); $font-icon: 'Active Icons'; $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 );