summaryrefslogtreecommitdiffstats
path: root/mdx.d.ts
blob: f3a9a9059e8f37056955252768a493310736b335 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
declare module '*.mdx' {
  import { MDXProps } from 'mdx/types';
  import { Meta } from '@ts/types/app';

  let MDXComponent: (props: MDXProps) => JSX.Element;
  export default MDXComponent;
  export const cover: string;
  export const image: string;
  export const intro: string;
  export const meta: Meta;
  export const pdf: string;
  export const seo: { title: string; description: string };
}
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 { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
@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 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,
);

// 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(500, "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
//============================================================================

$light-theme_black: hsl(207, 47%, 11%);
$light-theme_blue: hsl(206, 75%, 31%);
$light-theme_blue-o30: hsla(206, 75%, 31%, 0.3);
$light-theme_blue-bright: hsl(206, 77%, 36%);
$light-theme_blue-brighter: hsl(206, 80%, 47%);
$light-theme_blue-dark: hsl(206, 76%, 28%);
$light-theme_blue-darker: hsl(206, 60%, 20%);
$light-theme_grey: hsl(206, 15%, 80%);
$light-theme_grey-bright: hsl(206, 20%, 86%);
$light-theme_grey-brighter: hsl(206, 15%, 90%);
$light-theme_grey-dark: hsla(206, 30%, 30%);
$light-theme_grey-darker: hsla(206, 10%, 25%);
$light-theme_grey-darker-o70: hsla(206, 10%, 25%, 0.7);
$light-theme_grey-darker-o40: hsla(206, 10%, 25%, 0.4);
$light-theme_grey-darker-o20: hsla(206, 10%, 25%, 0.2);
$light-theme_white: hsl(206, 15%, 97%);
$light-theme_white-dark: hsl(206, 20%, 93%);
$light-theme_white-o90: hsl(206, 15%, 97%, 0.9);
$light-theme_orange: hsl(28, 91%, 22%);
$light-theme_red: hsl(1, 72%, 29%);
$light-theme_green: hsl(105, 90%, 16%);
$light-theme_magenta: hsl(322, 80%, 28%);
$light-theme_purple: hsl(282, 84%, 31%);
$light-theme_yellow: hsl(49, 90%, 16%);
$light-theme_cyan: hsl(187, 84%, 17%);

$dark-theme_black: hsl(208, 25%, 11%);
$dark-theme_black-o90: hsla(208, 25%, 11%, 0.9);
$dark-theme_black-bright: hsl(208, 21%, 15%);
$dark-theme_black-brighter: hsl(208, 25%, 17%);
$dark-theme_blue: hsl(200, 50%, 68%);
$dark-theme_blue-o30: hsla(200, 60%, 70%, 0.3);
$dark-theme_blue-bright: hsl(200, 55%, 70%);
$dark-theme_blue-brighter: hsl(200, 66%, 81%);
$dark-theme_blue-dark: hsl(200, 45%, 64%);
$dark-theme_blue-darker: hsl(200, 16%, 62%);
$dark-theme_grey: hsl(208, 10%, 70%);
$dark-theme_grey-dark: hsl(208, 20%, 25%);
$dark-theme_grey-dark-o70: hsla(208, 20%, 25%, 0.7);
$dark-theme_grey-dark-o40: hsla(208, 20%, 25%, 0.4);
$dark-theme_grey-dark-o20: hsla(208, 20%, 25%, 0.2);
$dark-theme_grey-darker: hsl(208, 18%, 20%);
$dark-theme_white: hsl(208, 25%, 92%);
$dark-theme_orange: hsl(35, 55%, 66%);
$dark-theme_red: hsl(2, 70%, 76%);
$dark-theme_green: hsl(100, 55%, 65%);
$dark-theme_magenta: hsl(318, 55%, 78%);
$dark-theme_purple: hsl(270, 60%, 78%);
$dark-theme_yellow: hsl(50, 60%, 65%);
$dark-theme_cyan: hsl(180, 60%, 68%);