-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolor-theme.scss
93 lines (89 loc) · 2.75 KB
/
color-theme.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
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
/*
* FILE: color-theme.scss
*
* This file defines color themes used in the project, including a map of color
* properties and values for different themes (e.g., "Light", "Dark").
*
* The `items` map includes:
* - Theme name (e.g., "Light", "Dark")
* - Value map defining color properties and their values for each theme
* - Keys like `text` and `background` with nested properties for different
* contexts (e.g., `base`, `accent`).
*
* Ensure both light and dark themes have consistent values to prevent issues
* in theme application.
*
* Ensure value names in the `$token` map (e.g., `background`, `text`, `shadow`)
* match the `alt-name` values in the `$exception-utility-properties` map
* located in the `20-mixin/_theme-applier.scss` file to ensure consistent and
* accurate generation of CSS utility classes.
*
* Ensure that category names, such as "global" and "surface," are single words
* without hyphens (`-`) to enable the `generateThemeUtilities` mixin to
* accurately select the item names.
*
* Colors are retrieved from the `color-palette` file using the `get` function,
* which utilizes the `tokenCssVariable` function to fetch CSS variables.
*/
// Import design tokens
@use "./color-palette" as palette;
@use "./box-shadow" as shadow;
// Import helper functions
@use "../10-functions/helpers/retrieve-value" as help-rtv;
// Retrieve a CSS variable from the token by key
@function get($arg1: null, $arg2: null) {
// Handle shadow tokens separately with an additional condition
@if to-lower-case($arg1) == "shadow" {
@return help-rtv.tokenCssVariable(
$arg2,
shadow.$token,
$token-prefix: "shade",
$exclude-base-suffix: true
);
} @else {
@return help-rtv.tokenCssVariable(
$arg1,
palette.$token,
$token-prefix: "color"
);
}
}
$token: (
"title": "Theme Color",
"description": "Themes with colors sourced from the color-palette token.",
"css-variable-prefix": "color",
"items": (
(
"name": "Light",
"value": (
"global": (
"text": get("Dark"),
"background": get("Light Bright"),
),
"surface": (
"text": get("Charcoal"),
"text-interact": get("Gray"),
"background": get("Gray Glare"),
"background-interact": get("Charcoal"),
"shadow": get("Shadow", "l"),
),
),
),
(
"name": "Dark",
"value": (
"global": (
"text": get("Light Bright"),
"background": get("Dark"),
),
"surface": (
"text": get("Gray Glare"),
"text-interact": get("Gray Bright"),
"background": get("Charcoal"),
"background-interact": get("Charcoal"),
"shadow": "none",
),
),
),
),
);