_variables.scss

@use "sass:map";
@use "sass:math";
@use "./theme-json" as *;

$entry-file-name: "undefined";

/**
 * Variables
 */

// ----
// Theme colors
// ----
$color-primary: $settings-color-yellow-500;
$color-secondary: $settings-color-grey-400;
$color-text: $settings-color-grey-900;

/**
* Sizes
*
* Only use for setup the grid to use the column mixin -> Corresponding to the layout settings in theme.json (1160px)
* The default and wide size is defined in the theme.json file.
*/
$column-preset: (
	// preset for desktop
	d : (
		column-width: 60,
		gutter-width: 40,
		total-column: 12
	),
	// preset for tablet
	t : (
		column-width: 60,
		gutter-width: 34,
		total-column: 8
	),
	// preset for mobile
	m : (
		column-width: 58,
		gutter-width: 31,
		total-column: 4
	)
);

// ----
// Breakpoints
// Based on WordPress breakpoints (https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss)
// ----
$breakpoints: (
	xs: 480,
	s: 601,         // 601px is a wordpress breakpoint (admin-bar become sticky)
	sm: 782,
	admin-bar: 784, // admin bar height change
	m: 960,
	md: 1080,
	mobile-to-desktop-nav: 1200,
	mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1
	l: 1440,
);

// ----
// border
// ----
$base-border-color: $settings-color-grey-800;
$base-border: 1px solid $base-border-color;
$base-border-radius: 3px;

// ==========
// Fonts
// ==========
// ----
// Font Family
// ----
$font-family-primary: "Poppins", "Poppins-fallback", sans-serif;

// ----
// Font Size
// ----
$font-size-base: var(--paragraph--font-size-default);
$font-size-sm: var(--paragraph--font-size-small);
$font-size-lg: var(--paragraph--font-size-large);
$font-size-xl: var(--paragraph--font-size-huge);

// ----
// Line Height
// ----
$line-height-base: var(--paragraph--line-height-default);