-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspace-gutter.scss
48 lines (44 loc) · 1.1 KB
/
space-gutter.scss
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
/*
* FILE: space-gutter.scss
*
* This file defines the gutter sizes used in the project, including specific
* values for different spacing elements (e.g., "Small", "Base", "Large").
*
* The `items` map includes:
* - Gutter size name (e.g., "Small", "Base", "Large")
* - Corresponding value retrieved using the `get` function
*
* Gutter sizes are retrieved from the `spacing` file using the `get`
* function, which utilizes the `retrieveVariables` function to fetch CSS
* variables.
*/
// Import design tokens
@use "./spacing.scss" as spacing;
// Import helper functions
@use "../10-functions/helpers/retrieve-value" as help-rtv;
// Retrieve a CSS variable from the token by key.
@function get($key: null) {
@return help-rtv.tokenCssVariable(
$key,
spacing.$token,
$token-prefix: "space"
);
}
$token: (
"title": "Space Gutter",
"description": "Defines gutter size values used in the project.",
"items": (
(
"name": "Base",
"value": get(m),
),
(
"name": "S",
"value": get(s),
),
(
"name": "L",
"value": get(l),
),
),
);