diff options
Diffstat (limited to 'htdocs/src/scss/abstracts/_variables.scss')
| -rw-r--r-- | htdocs/src/scss/abstracts/_variables.scss | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/htdocs/src/scss/abstracts/_variables.scss b/htdocs/src/scss/abstracts/_variables.scss new file mode 100644 index 0000000..a891bed --- /dev/null +++ b/htdocs/src/scss/abstracts/_variables.scss @@ -0,0 +1,137 @@ +@use "sass:math"; +@use "../abstracts/functions" as fun; + +//=========================================================================== +// Ratios +//=========================================================================== + +/// Ratios map +/// @prop {String} keys - Keys are identifiers mapped to a given ratio +/// @prop {Map} value - Value is actual ratio +$ratios: ( + "minor-second": 1.067, + "major-second": 1.125, + "minor-third": 1.2, + "major-third": 1.25, + "perfect-fourth": 1.333, + "augmented-fourth": 1.414, + "perfect-fifth": 1.5, + "golden-number": 1.618, +); + +// Cannot declare the following function in partials due to module loop. +// Also, it will only be used in this file so it is not a problem. + +/// Get ratio +/// @param {String} $name - Ratio name. +/// @return {Integer} The ratio value. +@function get-ratio($name) { + @return map-get($ratios, $name); +} + +//=========================================================================== +// Layout +//=========================================================================== + +/// Breakpoints map +/// @prop {String} keys - Keys are identifiers mapped to a given length +/// @prop {Map} values - Values are actual breakpoints expressed in pixels +$breakpoints: ( + "xs": fun.convert-px(568, "em"), + "sm": fun.convert-px(768, "em"), + "md": fun.convert-px(1024, "em"), + "lg": fun.convert-px(1200, "em"), + "xl": fun.convert-px(1600, "em"), + "2xl": fun.convert-px(1920, "em"), +); + +//=========================================================================== +// Fonts +//=========================================================================== + +/* stylelint-disable -- Fonts name are not keywords, lowercase is not needed. */ +/// Regular font family +/// @type List +$font-family_primary: ("Inter", "Liberation Sans", Arial, sans-serif); + +/// Alternative regular font family +/// @type List +$font-family_secondary: ("Kanit", "Liberation Sans", Arial, sans-serif); + +/// Monospace font family +/// @type List +$font-family_mono: ( + "Cousine", + "Liberation Mono", + "DejaVu Sans Mono", + "Courier New", + monospace +); +/* stylelint-enable */ + +$line-height: get-ratio("golden-number"); + +$font-size_base: 16px; +$font-size_base-rem: fun.convert-px(16); // font-size_base without unit +$font-size_ratio: get-ratio("minor-third"); +$font-size_sm: $font-size_base-rem * math.pow($font-size_ratio, -1); +$font-size_md: $font-size_base-rem * math.pow($font-size_ratio, 0); +$font-size_lg: $font-size_base-rem * math.pow($font-size_ratio, 1); +$font-size_xl: $font-size_base-rem * math.pow($font-size_ratio, 2); +$font-size_2xl: $font-size_base-rem * math.pow($font-size_ratio, 3); +$font-size_3xl: $font-size_base-rem * math.pow($font-size_ratio, 4); +$font-size_4xl: $font-size_base-rem * math.pow($font-size_ratio, 5); +$font-size_5xl: $font-size_base-rem * math.pow($font-size_ratio, 6); + +//============================================================================ +// Spacings +//============================================================================ + +$spacing_ratio: get-ratio("golden-number"); +$spacing_base: $spacing_ratio * 1rem; + +$spacing_3xs: math.div($spacing_base, 4); +$spacing_2xs: math.div($spacing_base, 3); +$spacing_xs: math.div($spacing_base, 2); +$spacing_sm: math.div($spacing_base, 1.5); +$spacing_md: $spacing_base; +$spacing_lg: $spacing_base * 1.5; +$spacing_xl: $spacing_base * 2; +$spacing_2xl: $spacing_base * 3; +$spacing_3xl: $spacing_base * 4; + +//============================================================================ +// Colors +//============================================================================ + +$color_black-squeeze: hsl(212, 55%, 97%); +$color_black-squeeze-opacity-80: hsla(212, 55%, 97%, 0.8); +$color_catskill-white: hsl(212, 53%, 92%); +$color_link-water: hsl(212, 51%, 87%); +$color_geyser: hsl(212, 27%, 83%); +$color_gull-gray: hsl(212, 15%, 66%); +$color_gull-gray-opacity: hsla(212, 15%, 66%, 0.55); +$color_pale-sky: hsl(212, 13%, 46%); +$color_fiord: hsl(212, 29%, 35%); +$color_rhino: hsl(212, 33%, 28%); +$color_cloud-burst: hsl(211, 36%, 12%); +$color_mirage: hsl(211, 36%, 14%); +$color_nile-blue: hsl(212, 47%, 19%); +$color_big-stone: hsl(212, 45%, 15%); +$color_firefly: hsl(212, 45%, 11%); +$color_firefly-opacity-80: hsla(212, 45%, 11%, 0.8); +$color_chambray: hsl(212, 45%, 40%); +$color_chathams-blue: hsl(212, 65%, 28%); +$color_chathams-blue-light: hsl(212, 90%, 30%); +$color_chathams-blue-light-opacity-25: hsla(212, 90%, 30%, 0.25); +$color_chathams-blue-dark: hsl(212, 70%, 25%); +$color_russet: hsl(23, 65%, 31%); +$color_russet-opacity-25: hsla(23, 65%, 31%, 0.25); +$color_horizon: hsl(213, 30%, 54%); +$color_kashmir-blue: hsl(212, 30%, 46%); +$color_spindle: hsl(212, 56%, 75%); +$color_spindle-light: hsl(212, 52%, 78%); +$color_spindle-light-opacity-35: hsla(212, 52%, 78%, 0.35); +$color_spindle-dark: hsl(213, 60%, 72%); +$color_brandy: hsl(37, 51%, 74%); +$color_brandy-opacity-40: hsla(37, 51%, 74%, 0.4); |