beapi-frontend-framework/src/scss/01-abstract/_variables.scss at dd2f13bef59ff2cfe5c8496fe7662a3d501aa46a · BeAPI/beapi-frontend-framework · GitHub

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
@use "sass:map";
@use "sass:math";

$entry-file-name: "undefined";

/**
 * Variables
 */

// ==========
// Colors
// ==========

// ----
// Dark/Light colors
// ----
$color-light: #fff;
$color-dark: #000;

// ----
// Grey colors
// ----
$color-grey-100: var(--wp--preset--color--grey-100);
$color-grey-200: var(--wp--preset--color--grey-200);
$color-grey-300: var(--wp--preset--color--grey-300);
$color-grey-400: var(--wp--preset--color--grey-400);
$color-grey-500: var(--wp--preset--color--grey-500);
$color-grey-600: var(--wp--preset--color--grey-600);
$color-grey-700: var(--wp--preset--color--grey-700);
$color-grey-800: var(--wp--preset--color--grey-800);
$color-grey-900: var(--wp--preset--color--grey-900);

// ----
// Palette colors
// ----
$color-yellow-500: var(--wp--preset--color--yellow-500);

// ----
// Theme colors
// ----
$color-primary: $color-yellow-500;
$color-secondary: $color-grey-400;
$color-text: $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,
	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: $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-xs: 14px;
$font-size-sm: 16px;
$font-size-md: 18px;
$font-size-lg: 24px;
$font-size-xl: 32px;
$font-size-xxl: 48px;
$font-size-xxxl: 56px;

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