Skip to content

Commit 9b25ed0

Browse files
brandyscarneybrandyscarney
committed
feat(css): add support for the subtle color map
1 parent 02c9d64 commit 9b25ed0

File tree

4 files changed

+371
-129
lines changed

4 files changed

+371
-129
lines changed

‎core/src/themes/functions.color.scss‎

Lines changed: 140 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:map";
2+
13
// Set the theme colors map to be used by the color functions
24
// --------------------------------------------------------------------------------------------
35
@mixin set-theme-colors($colorsMap) {
@@ -10,11 +12,13 @@
1012
// current-color(base) => var(--ion-color-base)
1113
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
1214
// --------------------------------------------------------------------------------------------
13-
@function current-color($variation, $alpha: null) {
15+
@function current-color($variation, $alpha: null, $subtle: false) {
16+
$variable: if($subtle, "--ion-color-subtle-#{$variation}", "--ion-color-#{$variation}");
17+
1418
@if $alpha == null {
15-
@return var(--ion-color-#{$variation});
19+
@return var(#{$variable});
1620
} @else {
17-
@return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
21+
@return rgba(var(#{$variable}-rgb), #{$alpha});
1822
}
1923
}
2024

@@ -25,17 +29,25 @@
2529
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
2630
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
2731
// --------------------------------------------------------------------------------------------
28-
@function ion-color($name, $variation, $alpha: null, $rgb: null) {
32+
@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
2933
@if not($theme-colors) {
3034
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
3135
}
3236

33-
$values: map-get($theme-colors, $name);
34-
$value: map-get($values, $variation);
35-
$variable: --ion-color-#{$name}-#{$variation};
37+
$values: map.get($theme-colors, $name);
38+
$values: map.get($values, if($subtle, subtle, bold));
39+
40+
$value: map.get($values, $variation);
41+
42+
// If the color requested is subtle we return `--ion-color-primary-subtle-contrast`
43+
// Otherwise we return `--ion-color-primary-contrast`
44+
$variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
3645

46+
// If the variation being used is base, we do not include the variant so
47+
// If the color requested is subtle we return `--ion-color-primary-subtle`
48+
// Otherwise we return `--ion-color-primary`
3749
@if ($variation == base) {
38-
$variable: --ion-color-#{$name};
50+
$variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
3951
}
4052

4153
@if ($alpha) {
@@ -79,43 +91,139 @@
7991
@return #{red($color)}, #{green($color)}, #{blue($color)};
8092
}
8193

82-
// Generates the color classes and variables
83-
// based on the colors map
94+
// Generates color variants for the specified color based on the
95+
// colors map for whichever hue is passed (bold, subtle).
8496
// --------------------------------------------------------------------------------------------
85-
@mixin generate-color($color-name) {
97+
// Example usage (bold):
98+
// .ion-color-primary {
99+
// @include generate-color-variants("primary");
100+
// }
101+
//
102+
// Example output (bold):
103+
// .ion-color-primary {
104+
// --ion-color-base: var(--ion-color-primary-base, #105cef) !important;
105+
// --ion-color-base-rgb: var(--ion-color-primary-base-rgb, 16, 92, 239) !important;
106+
// --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
107+
// --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
108+
// --ion-color-shade: var(--ion-color-primary-shade, #0f54da) !important;
109+
// --ion-color-tint: var(--ion-color-primary-tint, #94a5f4) !important;
110+
// }
111+
// --------------------------------------------------------------------------------------------
112+
// Example usage (subtle):
113+
// .ion-color-primary {
114+
// @include generate-color-variants("primary", "subtle")
115+
// }
116+
//
117+
// Example output (subtle):
118+
// .ion-color-primary {
119+
// --ion-color-subtle-base: var(--ion-color-primary-subtle-base, #f2f4fd) !important;
120+
// --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-base-rgb, 242, 244, 253) !important;
121+
// --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast, #105cef) !important;
122+
// --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb, 16, 92, 239) !important;
123+
// --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade, #d0d7fa) !important;
124+
// --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint, #e9ecfc) !important;
125+
// }
126+
// --------------------------------------------------------------------------------------------
127+
@mixin generate-color-variants($color-name, $hue: "bold") {
86128
@if not($theme-colors) {
87129
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
88130
}
89131

90-
$value: map-get($theme-colors, $color-name);
91-
92-
$base: map-get($value, base);
93-
$contrast: map-get($value, contrast);
94-
$shade: map-get($value, shade);
95-
$tint: map-get($value, tint);
132+
// Grab the different hue color maps for the
133+
// specified color and then grab the map of color variants
134+
$hue-colors: map.get($theme-colors, $color-name);
135+
$color-variants: map.get($hue-colors, $hue);
136+
137+
// Determine prefix based on hue value
138+
$prefix: if($hue == "subtle", "-subtle", "");
139+
140+
// TODO this @if can be removed if we add subtle colors for ios and md
141+
// Only proceed if the color variants exist
142+
@if $color-variants {
143+
// Grab the individual color variants
144+
$base: map.get($color-variants, base);
145+
$base-rgb: map.get($color-variants, base-rgb);
146+
$contrast: map.get($color-variants, contrast);
147+
$contrast-rgb: map.get($color-variants, contrast-rgb);
148+
$shade: map.get($color-variants, shade);
149+
$tint: map.get($color-variants, tint);
150+
151+
// Generate CSS variables dynamically
152+
--ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
153+
--ion-color#{$prefix}-base-rgb: var(--ion-color-#{$color-name}#{$prefix}-rgb, #{$base-rgb}) !important;
154+
--ion-color#{$prefix}-contrast: var(--ion-color-#{$color-name}#{$prefix}-contrast, #{$contrast}) !important;
155+
--ion-color#{$prefix}-contrast-rgb: var(
156+
--ion-color-#{$color-name}#{$prefix}-contrast-rgb,
157+
#{$contrast-rgb}
158+
) !important;
159+
--ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
160+
--ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
161+
}
162+
}
96163

97-
--ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
98-
--ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
99-
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
100-
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
101-
--ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
102-
--ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
164+
// Generates both bold and subtle color variables
165+
// for the specified color in the colors map.
166+
// --------------------------------------------------------------------------------------------
167+
@mixin generate-color($color-name) {
168+
@include generate-color-variants($color-name);
169+
@include generate-color-variants($color-name, "subtle");
103170
}
104171

105-
// Generates the CSS variables for each color
106-
// based on the colors map
172+
// Generates color variables for all colors in the colors map for both hues (bold, subtle).
173+
// --------------------------------------------------------------------------------------------
174+
// Example usage:
175+
// :root {
176+
// generate-color-variables()
177+
// }
178+
//
179+
// Example output:
180+
// :root {
181+
// --ion-color-primary: #105cef;
182+
// --ion-color-primary-rgb: 16, 92, 239;
183+
// --ion-color-primary-contrast: #ffffff;
184+
// --ion-color-primary-contrast-rgb: 255, 255, 255;
185+
// --ion-color-primary-shade: #0f54da;
186+
// --ion-color-primary-tint: #94a5f4;
187+
// --ion-color-primary-subtle: #f2f4fd;
188+
// --ion-color-primary-subtle-rgb: 242, 244, 253;
189+
// --ion-color-primary-subtle-contrast: #105cef;
190+
// --ion-color-primary-subtle-contrast-rgb: 16, 92, 239;
191+
// --ion-color-primary-subtle-shade: #d0d7fa;
192+
// --ion-color-primary-subtle-tint: #e9ecfc;
193+
// ...
194+
// --ion-color-dark: #292929;
195+
// --ion-color-dark-rgb: 41, 41, 41;
196+
// --ion-color-dark-contrast: #ffffff;
197+
// --ion-color-dark-contrast-rgb: 255, 255, 255;
198+
// --ion-color-dark-shade: #242424;
199+
// --ion-color-dark-tint: #4e4e4e;
200+
// --ion-color-dark-subtle: #f5f5f5;
201+
// --ion-color-dark-subtle-rgb: 245, 245, 245;
202+
// --ion-color-dark-subtle-contrast: #292929;
203+
// --ion-color-dark-subtle-contrast-rgb: 41, 41, 41;
204+
// --ion-color-dark-subtle-shade: #e0e0e0;
205+
// --ion-color-dark-subtle-tint: #efefef;
206+
// }
107207
// --------------------------------------------------------------------------------------------
108208
@mixin generate-color-variables() {
109209
@if not($theme-colors) {
110-
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
210+
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color().';
111211
}
112212

113213
@each $color-name, $value in $theme-colors {
114-
--ion-color-#{$color-name}: #{map-get($value, base)};
115-
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map-get($value, base))};
116-
--ion-color-#{$color-name}-contrast: #{map-get($value, contrast)};
117-
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map-get($value, contrast))};
118-
--ion-color-#{$color-name}-shade: #{map-get($value, shade)};
119-
--ion-color-#{$color-name}-tint: #{map-get($value, tint)};
214+
@each $hue in (bold, subtle) {
215+
$colors: map.get($value, $hue);
216+
217+
@if $colors != null {
218+
$prefix: if($hue == subtle, "-subtle", "");
219+
220+
--ion-color-#{$color-name}#{$prefix}: #{map.get($colors, base)};
221+
--ion-color-#{$color-name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
222+
--ion-color-#{$color-name}#{$prefix}-contrast: #{map.get($colors, contrast)};
223+
--ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
224+
--ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
225+
--ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
226+
}
227+
}
120228
}
121229
}

0 commit comments

Comments
 (0)