Skip to content

Commit a66964b

Browse files
mdomdo
committed
Utilities, some helpers, and theme colors
1 parent dc65ef4 commit a66964b

File tree

7 files changed

+565
-464
lines changed

7 files changed

+565
-464
lines changed

‎scss/_maps.scss

Lines changed: 180 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,180 @@
1-
@use "sass:map";
2-
@use "colors" as *;
3-
@use "functions" as *;
4-
@use "config" as *;
5-
@use "variables" as *;
6-
7-
// Re-assigned maps
8-
//
9-
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
10-
11-
// scss-docs-start theme-colors-rgb
12-
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
13-
// scss-docs-end theme-colors-rgb
14-
15-
// scss-docs-start theme-text-map
16-
$theme-colors-text: (
17-
"primary": $primary-text-emphasis,
18-
"secondary": $secondary-text-emphasis,
19-
"success": $success-text-emphasis,
20-
"info": $info-text-emphasis,
21-
"warning": $warning-text-emphasis,
22-
"danger": $danger-text-emphasis,
23-
"light": $light-text-emphasis,
24-
"dark": $dark-text-emphasis,
25-
) !default;
26-
// scss-docs-end theme-text-map
27-
28-
// scss-docs-start theme-bg-subtle-map
29-
$theme-colors-bg-subtle: (
30-
"primary": $primary-bg-subtle,
31-
"secondary": $secondary-bg-subtle,
32-
"success": $success-bg-subtle,
33-
"info": $info-bg-subtle,
34-
"warning": $warning-bg-subtle,
35-
"danger": $danger-bg-subtle,
36-
"light": $light-bg-subtle,
37-
"dark": $dark-bg-subtle,
38-
) !default;
39-
// scss-docs-end theme-bg-subtle-map
40-
41-
// scss-docs-start theme-border-subtle-map
42-
$theme-colors-border-subtle: (
43-
"primary": $primary-border-subtle,
44-
"secondary": $secondary-border-subtle,
45-
"success": $success-border-subtle,
46-
"info": $info-border-subtle,
47-
"warning": $warning-border-subtle,
48-
"danger": $danger-border-subtle,
49-
"light": $light-border-subtle,
50-
"dark": $dark-border-subtle,
51-
) !default;
52-
// scss-docs-end theme-border-subtle-map
53-
54-
$theme-colors-text-dark: null !default;
55-
$theme-colors-bg-subtle-dark: null !default;
56-
$theme-colors-border-subtle-dark: null !default;
57-
58-
@if $enable-dark-mode {
59-
// scss-docs-start theme-text-dark-map
60-
$theme-colors-text-dark: (
61-
"primary": $primary-text-emphasis-dark,
62-
"secondary": $secondary-text-emphasis-dark,
63-
"success": $success-text-emphasis-dark,
64-
"info": $info-text-emphasis-dark,
65-
"warning": $warning-text-emphasis-dark,
66-
"danger": $danger-text-emphasis-dark,
67-
"light": $light-text-emphasis-dark,
68-
"dark": $dark-text-emphasis-dark,
69-
) !default;
70-
// scss-docs-end theme-text-dark-map
71-
72-
// scss-docs-start theme-bg-subtle-dark-map
73-
$theme-colors-bg-subtle-dark: (
74-
"primary": $primary-bg-subtle-dark,
75-
"secondary": $secondary-bg-subtle-dark,
76-
"success": $success-bg-subtle-dark,
77-
"info": $info-bg-subtle-dark,
78-
"warning": $warning-bg-subtle-dark,
79-
"danger": $danger-bg-subtle-dark,
80-
"light": $light-bg-subtle-dark,
81-
"dark": $dark-bg-subtle-dark,
82-
) !default;
83-
// scss-docs-end theme-bg-subtle-dark-map
84-
85-
// scss-docs-start theme-border-subtle-dark-map
86-
$theme-colors-border-subtle-dark: (
87-
"primary": $primary-border-subtle-dark,
88-
"secondary": $secondary-border-subtle-dark,
89-
"success": $success-border-subtle-dark,
90-
"info": $info-border-subtle-dark,
91-
"warning": $warning-border-subtle-dark,
92-
"danger": $danger-border-subtle-dark,
93-
"light": $light-border-subtle-dark,
94-
"dark": $dark-border-subtle-dark,
95-
) !default;
96-
// scss-docs-end theme-border-subtle-dark-map
97-
}
98-
99-
// Utilities maps
100-
//
101-
// Extends the default `$theme-colors` maps to help create our utilities.
102-
103-
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
104-
// scss-docs-start utilities-colors
105-
$utilities-colors: $theme-colors-rgb !default;
106-
// scss-docs-end utilities-colors
107-
108-
// scss-docs-start utilities-text-colors
109-
$utilities-text: map.merge(
110-
$utilities-colors,
111-
(
112-
"black": to-rgb($black),
113-
"white": to-rgb($white),
114-
"body": to-rgb($body-color)
115-
)
116-
) !default;
117-
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
118-
119-
$utilities-text-emphasis-colors: (
120-
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
121-
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
122-
"success-emphasis": var(--#{$prefix}success-text-emphasis),
123-
"info-emphasis": var(--#{$prefix}info-text-emphasis),
124-
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
125-
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
126-
"light-emphasis": var(--#{$prefix}light-text-emphasis),
127-
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
128-
) !default;
129-
// scss-docs-end utilities-text-colors
130-
131-
// scss-docs-start utilities-bg-colors
132-
$utilities-bg: map.merge(
133-
$utilities-colors,
134-
(
135-
"black": to-rgb($black),
136-
"white": to-rgb($white),
137-
"body": to-rgb($body-bg)
138-
)
139-
) !default;
140-
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
141-
142-
$utilities-bg-subtle: (
143-
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
144-
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
145-
"success-subtle": var(--#{$prefix}success-bg-subtle),
146-
"info-subtle": var(--#{$prefix}info-bg-subtle),
147-
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
148-
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
149-
"light-subtle": var(--#{$prefix}light-bg-subtle),
150-
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
151-
) !default;
152-
// scss-docs-end utilities-bg-colors
153-
154-
// scss-docs-start utilities-border-colors
155-
$utilities-border: map.merge(
156-
$utilities-colors,
157-
(
158-
"black": to-rgb($black),
159-
"white": to-rgb($white)
160-
)
161-
) !default;
162-
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
163-
164-
$utilities-border-subtle: (
165-
"primary-subtle": var(--#{$prefix}primary-border-subtle),
166-
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
167-
"success-subtle": var(--#{$prefix}success-border-subtle),
168-
"info-subtle": var(--#{$prefix}info-border-subtle),
169-
"warning-subtle": var(--#{$prefix}warning-border-subtle),
170-
"danger-subtle": var(--#{$prefix}danger-border-subtle),
171-
"light-subtle": var(--#{$prefix}light-border-subtle),
172-
"dark-subtle": var(--#{$prefix}dark-border-subtle)
173-
) !default;
174-
// scss-docs-end utilities-border-colors
175-
176-
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
177-
178-
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
179-
180-
$gutters: $spacers !default;
1+
// @use "sass:map";
2+
// @use "colors" as *;
3+
// @use "functions" as *;
4+
// @use "config" as *;
5+
// @use "variables" as *;
6+
7+
// // Re-assigned maps
8+
// //
9+
// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
10+
11+
// // scss-docs-start theme-colors-rgb
12+
// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
13+
// // scss-docs-end theme-colors-rgb
14+
15+
// // scss-docs-start theme-text-map
16+
// $theme-colors-text: (
17+
// "primary": $primary-text-emphasis,
18+
// "secondary": $secondary-text-emphasis,
19+
// "success": $success-text-emphasis,
20+
// "info": $info-text-emphasis,
21+
// "warning": $warning-text-emphasis,
22+
// "danger": $danger-text-emphasis,
23+
// "light": $light-text-emphasis,
24+
// "dark": $dark-text-emphasis,
25+
// ) !default;
26+
// // scss-docs-end theme-text-map
27+
28+
// // scss-docs-start theme-bg-subtle-map
29+
// $theme-colors-bg-subtle: (
30+
// "primary": $primary-bg-subtle,
31+
// "secondary": $secondary-bg-subtle,
32+
// "success": $success-bg-subtle,
33+
// "info": $info-bg-subtle,
34+
// "warning": $warning-bg-subtle,
35+
// "danger": $danger-bg-subtle,
36+
// "light": $light-bg-subtle,
37+
// "dark": $dark-bg-subtle,
38+
// ) !default;
39+
// // scss-docs-end theme-bg-subtle-map
40+
41+
// // scss-docs-start theme-border-subtle-map
42+
// $theme-colors-border-subtle: (
43+
// "primary": $primary-border-subtle,
44+
// "secondary": $secondary-border-subtle,
45+
// "success": $success-border-subtle,
46+
// "info": $info-border-subtle,
47+
// "warning": $warning-border-subtle,
48+
// "danger": $danger-border-subtle,
49+
// "light": $light-border-subtle,
50+
// "dark": $dark-border-subtle,
51+
// ) !default;
52+
// // scss-docs-end theme-border-subtle-map
53+
54+
// $theme-colors-text-dark: null !default;
55+
// $theme-colors-bg-subtle-dark: null !default;
56+
// $theme-colors-border-subtle-dark: null !default;
57+
58+
// @if $enable-dark-mode {
59+
// // scss-docs-start theme-text-dark-map
60+
// $theme-colors-text-dark: (
61+
// "primary": $primary-text-emphasis-dark,
62+
// "secondary": $secondary-text-emphasis-dark,
63+
// "success": $success-text-emphasis-dark,
64+
// "info": $info-text-emphasis-dark,
65+
// "warning": $warning-text-emphasis-dark,
66+
// "danger": $danger-text-emphasis-dark,
67+
// "light": $light-text-emphasis-dark,
68+
// "dark": $dark-text-emphasis-dark,
69+
// ) !default;
70+
// // scss-docs-end theme-text-dark-map
71+
72+
// // scss-docs-start theme-bg-subtle-dark-map
73+
// $theme-colors-bg-subtle-dark: (
74+
// "primary": $primary-bg-subtle-dark,
75+
// "secondary": $secondary-bg-subtle-dark,
76+
// "success": $success-bg-subtle-dark,
77+
// "info": $info-bg-subtle-dark,
78+
// "warning": $warning-bg-subtle-dark,
79+
// "danger": $danger-bg-subtle-dark,
80+
// "light": $light-bg-subtle-dark,
81+
// "dark": $dark-bg-subtle-dark,
82+
// ) !default;
83+
// // scss-docs-end theme-bg-subtle-dark-map
84+
85+
// // scss-docs-start theme-border-subtle-dark-map
86+
// $theme-colors-border-subtle-dark: (
87+
// "primary": $primary-border-subtle-dark,
88+
// "secondary": $secondary-border-subtle-dark,
89+
// "success": $success-border-subtle-dark,
90+
// "info": $info-border-subtle-dark,
91+
// "warning": $warning-border-subtle-dark,
92+
// "danger": $danger-border-subtle-dark,
93+
// "light": $light-border-subtle-dark,
94+
// "dark": $dark-border-subtle-dark,
95+
// ) !default;
96+
// // scss-docs-end theme-border-subtle-dark-map
97+
// }
98+
99+
// // Utilities maps
100+
// //
101+
// // Extends the default `$theme-colors` maps to help create our utilities.
102+
103+
// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
104+
// // scss-docs-start utilities-colors
105+
// $utilities-colors: $theme-colors-rgb !default;
106+
// // scss-docs-end utilities-colors
107+
108+
// // scss-docs-start utilities-text-colors
109+
// $utilities-text: map.merge(
110+
// $utilities-colors,
111+
// (
112+
// "black": to-rgb($black),
113+
// "white": to-rgb($white),
114+
// "body": to-rgb($body-color)
115+
// )
116+
// ) !default;
117+
// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
118+
119+
// $utilities-text-emphasis-colors: (
120+
// "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
121+
// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
122+
// "success-emphasis": var(--#{$prefix}success-text-emphasis),
123+
// "info-emphasis": var(--#{$prefix}info-text-emphasis),
124+
// "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
125+
// "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
126+
// "light-emphasis": var(--#{$prefix}light-text-emphasis),
127+
// "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
128+
// ) !default;
129+
// // scss-docs-end utilities-text-colors
130+
131+
// // scss-docs-start utilities-bg-colors
132+
// $utilities-bg: map.merge(
133+
// $utilities-colors,
134+
// (
135+
// "black": to-rgb($black),
136+
// "white": to-rgb($white),
137+
// "body": to-rgb($body-bg)
138+
// )
139+
// ) !default;
140+
// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
141+
142+
// $utilities-bg-subtle: (
143+
// "primary-subtle": var(--#{$prefix}primary-bg-subtle),
144+
// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
145+
// "success-subtle": var(--#{$prefix}success-bg-subtle),
146+
// "info-subtle": var(--#{$prefix}info-bg-subtle),
147+
// "warning-subtle": var(--#{$prefix}warning-bg-subtle),
148+
// "danger-subtle": var(--#{$prefix}danger-bg-subtle),
149+
// "light-subtle": var(--#{$prefix}light-bg-subtle),
150+
// "dark-subtle": var(--#{$prefix}dark-bg-subtle)
151+
// ) !default;
152+
// // scss-docs-end utilities-bg-colors
153+
154+
// // scss-docs-start utilities-border-colors
155+
// $utilities-border: map.merge(
156+
// $utilities-colors,
157+
// (
158+
// "black": to-rgb($black),
159+
// "white": to-rgb($white)
160+
// )
161+
// ) !default;
162+
// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
163+
164+
// $utilities-border-subtle: (
165+
// "primary-subtle": var(--#{$prefix}primary-border-subtle),
166+
// "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
167+
// "success-subtle": var(--#{$prefix}success-border-subtle),
168+
// "info-subtle": var(--#{$prefix}info-border-subtle),
169+
// "warning-subtle": var(--#{$prefix}warning-border-subtle),
170+
// "danger-subtle": var(--#{$prefix}danger-border-subtle),
171+
// "light-subtle": var(--#{$prefix}light-border-subtle),
172+
// "dark-subtle": var(--#{$prefix}dark-border-subtle)
173+
// ) !default;
174+
// // scss-docs-end utilities-border-colors
175+
176+
// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
177+
178+
// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
179+
180+
// $gutters: $spacers !default;

0 commit comments

Comments
 (0)