aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles/abstracts/_variables.scss
blob: 7dfc7208f5ba45c4d065cd165668eeabd30d326e (plain) 
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
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { 
@use "sass:map";
@use "sass:math";
@use "@styles/abstracts/functions" as fun;

//===========================================================================
// Ratios
//===========================================================================

/// Ratios map
/// @prop {String} keys - Keys are identifiers mapped to a given ratio
/// @prop {Map} value - Value is
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-01 04:38:20 +0000
ond": 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, ); // I cannot declare the following function with others functions due to module // loop. But, it will only be used in this file so it is not really 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: ( "2xs": fun.convert-px(400, "em"), "xs": fun.convert-px(600, "em"), "sm": fun.convert-px(800, "em"), "md": fun.convert-px(1280, "em"), "lg": fun.convert-px(1600, "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_levels: "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"; // We start with small font-size, so it needs to be less than $font-size_base. $font-size_current: math.div($font-size_base-rem, $font-size_ratio); /// Font-sizes map ('sm', 'md', 'lg'...) /// @prop {String} keys - Size as key is mapped to a given font-size /// @prop {Map} value - Value is actual font-size $font-sizes: (); // We fill our font-sizes map. /// Inspired by Stephanie Eckles. /// @link https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/ @each $level in $font-size_levels { $font-size_current: $font-size_current * $font-size_ratio; $font-sizes: map.merge( $font-sizes, ( $level: $font-size_current, ) ); } // We cannot declare this function with others functions due to module loop. /// Get font-size /// @param {String} $name - Font-size ('sm', 'md', 'lg'...). /// @return {Integer} The font-size value. @function font-size($key) { @return map.get($font-sizes, $key); } //============================================================================ // Spacings //============================================================================ $spacing_ratio: get-ratio("golden-number"); $spacing_base: $spacing_ratio * 1rem; $spacing_levels: "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"; // We start with 2xs spacing, so it needs to be less than the base. $spacing_current: math.div($spacing_base, $spacing_ratio * 3); /// Spacings map ('sm', 'md', 'lg'...) /// @prop {String} keys - Size as key is mapped to a given spacing /// @prop {Map} value - Value is actual spacing $spacings: (); /// We fill our spacings map. @each $level in $spacing_levels { $spacing_current: $spacing_current * $spacing_ratio; $spacings: map.merge( $spacings, ( $level: $spacing_current, ) ); } // We cannot declare this function with others functions due to module loop. /// Get spacing. /// @param {String} $name - Spacing size ('sm', 'md', 'lg'...). /// @return {Integer} The spacing value. @function spacing($key) { @return map.get($spacings, $key); } //============================================================================ // Colors //============================================================================ $color_black: hsl(207, 47%, 11%); $color_blue: hsl(206, 75%, 31%); $color_blue-bright: hsl(206, 77%, 36%); $color_blue-brighter: hsl(200, 75%, 45%); $color_blue-dark: hsl(206, 76%, 25%); $color_grey: hsl(206, 15%, 80%); $color_grey-dark: hsla(206, 10%, 25%); $color_grey-dark-o70: hsla(206, 10%, 25%, 0.7); $color_grey-dark-o40: hsla(206, 10%, 25%, 0.4); $color_grey-dark-o20: hsla(206, 10%, 25%, 0.2); $color_orange: hsl(32, 100%, 55%); $color_white: hsl(206, 15%, 97%); $color_white-o90: hsl(206, 15%, 97%, 0.9); $test: hsl(206, 54%, 95%); $test2: hsl(210, 40%, 96%);
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-01 04:38:20 +0000