1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
@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);
$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);
//============================================================================
// 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;
//============================================================================
// Colors
//============================================================================
$color_black-squeeze: hsl(212, 55%, 97%);
$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_pale-sky: hsl(212, 13%, 46%);
$color_nile-blue: hsl(212, 47%, 19%);
$color_firefly: hsl(212, 45%, 11%);
$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%);
|
