Skip to content

Commit 886ef87

Browse files
brandyscarneybrandyscarney
committed
feat(themes): remove old $colors map and functions and use new tokens
1 parent 6c94505 commit 886ef87

File tree

7 files changed

+30
-541
lines changed

7 files changed

+30
-541
lines changed

‎core/src/css/core.scss‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,6 @@
44
@import "../components/menu/menu.md.vars";
55
@import "../components/modal/modal.native.vars";
66

7-
// Ionic Colors
8-
// --------------------------------------------------
9-
10-
:root {
11-
/**
12-
* Set the theme colors from the
13-
* `native.theme.default.scss` file.
14-
*/
15-
@include set-theme-colors($colors);
16-
@include generate-color-variables();
17-
18-
@each $color-name, $value in $colors {
19-
.ion-color-#{$color-name} {
20-
@include generate-color($color-name);
21-
}
22-
}
23-
}
24-
257
// Ionic Font Family
268
// --------------------------------------------------
279

‎core/src/css/ionic/core.ionic.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,6 @@
33
// Ionic Global Styles
44
// --------------------------------------------------
55

6-
:root {
7-
/**
8-
* Set the theme colors from the
9-
* `ionic.theme.default.scss` file.
10-
*/
11-
@include globals.set-theme-colors(globals.$ionic-colors);
12-
@include globals.generate-color-variables();
13-
14-
@each $color-name, $value in globals.$ionic-colors {
15-
.ion-color-#{$color-name} {
16-
@include globals.generate-color($color-name);
17-
}
18-
}
19-
}
20-
216
html {
227
--ionic-dynamic-font: -apple-system-body;
238
}

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

Lines changed: 30 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
@use "sass:map";
22

3-
// Set the theme colors map to be used by the color functions
4-
// --------------------------------------------------------------------------------------------
5-
@mixin set-theme-colors($colorsMap) {
6-
$theme-colors: $colorsMap !global;
7-
}
8-
93
// Gets the active color's css variable from a variation. Alpha is optional.
104
// --------------------------------------------------------------------------------------------
115
// Example usage:
@@ -25,50 +19,48 @@
2519
// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
2620
// --------------------------------------------------------------------------------------------
2721
// Example usage:
28-
// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
22+
// ion-color(primary, base) => var(--ion-color-primary, var(--ion-color-primary-bold))
2923
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
30-
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
24+
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb), 0.5)
25+
// ion-color(primary, base, null, true) => var(--ion-color-primary-rgb)
26+
// ion-color(primary, base, null, null, true) => var(--ion-color-primary-subtle)
3127
// --------------------------------------------------------------------------------------------
3228
@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
33-
@if not($theme-colors) {
34-
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
35-
}
36-
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-
// TODO(FW-6417): this can be removed when foreground is required
43-
// Fallback to "base" variant when "foreground" variant is undefined
44-
@if ($variation == foreground and $value == null) {
45-
$variation: base;
46-
$value: map.get($values, $variation);
47-
}
48-
49-
// If the color requested is subtle we return `--ion-color-{color}-subtle-contrast`,
50-
// otherwise we return `--ion-color-{color}-contrast`.
51-
$variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
52-
53-
// If the variation being used is "base", we do not include the variant.
54-
// If the color requested is subtle we return `--ion-color-{color}-subtle`,
55-
// otherwise we return `--ion-color-{color}`.
56-
@if ($variation == base) {
57-
$variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
29+
// Build base variable name
30+
$base-variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
31+
$variation-suffix: if($variation == base, "", "-#{$variation}");
32+
$variable: "#{$base-variable}#{$variation-suffix}";
33+
34+
// Build fallback variable name (only for bold colors)
35+
$fallback-variable: null;
36+
@if (not $subtle) {
37+
$fallback-base: "--ion-color-#{$name}-bold";
38+
$fallback-variable: "#{$fallback-base}#{$variation-suffix}";
5839
}
5940

41+
// Handle alpha transparency
6042
@if ($alpha) {
61-
$value: color-to-rgb-list($value);
43+
$rgb-var: "#{$variable}-rgb";
44+
$fallback-rgb: if($fallback-variable, "#{$fallback-variable}-rgb", null);
6245

63-
@return rgba(var(#{$variable}-rgb, $value), $alpha);
46+
@if ($fallback-rgb) {
47+
@return rgba(var(#{$rgb-var}, var(#{$fallback-rgb})), $alpha);
48+
} @else {
49+
@return rgba(var(#{$rgb-var}), $alpha);
50+
}
6451
}
6552

53+
// Handle RGB variables
6654
@if ($rgb) {
67-
$value: color-to-rgb-list($value);
68-
$variable: #{$variable}-rgb;
55+
$variable: "#{$variable}-rgb";
56+
$fallback-variable: if($fallback-variable, "#{$fallback-variable}-rgb", null);
6957
}
7058

71-
@return var(#{$variable}, $value);
59+
@if ($fallback-variable) {
60+
@return var(#{$variable}, var(#{$fallback-variable}));
61+
} @else {
62+
@return var(#{$variable});
63+
}
7264
}
7365

7466
// Mixes a color with black to create its shade.
@@ -97,158 +89,3 @@
9789
}
9890
@return #{red($color)}, #{green($color)}, #{blue($color)};
9991
}
100-
101-
// Generates color variants for the specified color based on the
102-
// colors map for whichever hue is passed (bold, subtle).
103-
// --------------------------------------------------------------------------------------------
104-
// Example usage (bold):
105-
// .ion-color-primary {
106-
// @include generate-color-variants("primary");
107-
// }
108-
//
109-
// Example output (bold):
110-
// .ion-color-primary {
111-
// --ion-color-base: var(--ion-color-primary-base, #105cef) !important;
112-
// --ion-color-base-rgb: var(--ion-color-primary-base-rgb, 16, 92, 239) !important;
113-
// --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
114-
// --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
115-
// --ion-color-shade: var(--ion-color-primary-shade, #0f54da) !important;
116-
// --ion-color-tint: var(--ion-color-primary-tint, #94a5f4) !important;
117-
// }
118-
// --------------------------------------------------------------------------------------------
119-
// Example usage (subtle):
120-
// .ion-color-primary {
121-
// @include generate-color-variants("primary", "subtle")
122-
// }
123-
//
124-
// Example output (subtle):
125-
// .ion-color-primary {
126-
// --ion-color-subtle-base: var(--ion-color-primary-subtle-base, #f2f4fd) !important;
127-
// --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-base-rgb, 242, 244, 253) !important;
128-
// --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast, #105cef) !important;
129-
// --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb, 16, 92, 239) !important;
130-
// --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade, #d0d7fa) !important;
131-
// --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint, #e9ecfc) !important;
132-
// }
133-
// --------------------------------------------------------------------------------------------
134-
@mixin generate-color-variants($color-name, $hue: "bold") {
135-
@if not($theme-colors) {
136-
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
137-
}
138-
139-
// Grab the different hue color maps for the
140-
// specified color and then grab the map of color variants
141-
$hue-colors: map.get($theme-colors, $color-name);
142-
$color-variants: map.get($hue-colors, $hue);
143-
144-
$prefix: if($hue == "subtle", "-subtle", "");
145-
146-
// TODO(FW-6417) this @if can be removed if we add subtle colors for ios and md
147-
// Only proceed if the color variants exist
148-
@if $color-variants {
149-
// Grab the individual color variants
150-
$base: map.get($color-variants, base);
151-
$base-rgb: map.get($color-variants, base-rgb);
152-
$contrast: map.get($color-variants, contrast);
153-
$contrast-rgb: map.get($color-variants, contrast-rgb);
154-
$shade: map.get($color-variants, shade);
155-
$tint: map.get($color-variants, tint);
156-
$foreground: map.get($color-variants, foreground);
157-
158-
// Generate CSS variables dynamically
159-
--ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
160-
--ion-color#{$prefix}-base-rgb: var(--ion-color-#{$color-name}#{$prefix}-rgb, #{$base-rgb}) !important;
161-
--ion-color#{$prefix}-contrast: var(--ion-color-#{$color-name}#{$prefix}-contrast, #{$contrast}) !important;
162-
--ion-color#{$prefix}-contrast-rgb: var(
163-
--ion-color-#{$color-name}#{$prefix}-contrast-rgb,
164-
#{$contrast-rgb}
165-
) !important;
166-
--ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
167-
--ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
168-
// TODO(FW-6417): remove the fallback variable when the foreground variable is
169-
// required by all palettes for all themes:
170-
// --ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
171-
--ion-color#{$prefix}-foreground: var(
172-
--ion-color-#{$color-name}#{$prefix}-foreground,
173-
var(--ion-color-#{$color-name}#{$prefix}, #{$foreground})
174-
) !important;
175-
}
176-
}
177-
178-
// Generates both bold and subtle color variables
179-
// for the specified color in the colors map.
180-
// --------------------------------------------------------------------------------------------
181-
@mixin generate-color($color-name) {
182-
@include generate-color-variants($color-name);
183-
@include generate-color-variants($color-name, "subtle");
184-
}
185-
186-
// Generates color variables for all colors in the colors map for both hues (bold, subtle).
187-
// --------------------------------------------------------------------------------------------
188-
// Example usage:
189-
// :root {
190-
// generate-color-variables()
191-
// }
192-
//
193-
// Example output:
194-
// :root {
195-
// --ion-color-primary: #105cef;
196-
// --ion-color-primary-rgb: 16, 92, 239;
197-
// --ion-color-primary-contrast: #ffffff;
198-
// --ion-color-primary-contrast-rgb: 255, 255, 255;
199-
// --ion-color-primary-shade: #0f54da;
200-
// --ion-color-primary-tint: #94a5f4;
201-
// --ion-color-primary-foreground: #105cef;
202-
// --ion-color-primary-subtle: #f2f4fd;
203-
// --ion-color-primary-subtle-rgb: 242, 244, 253;
204-
// --ion-color-primary-subtle-contrast: #105cef;
205-
// --ion-color-primary-subtle-contrast-rgb: 16, 92, 239;
206-
// --ion-color-primary-subtle-shade: #d0d7fa;
207-
// --ion-color-primary-subtle-tint: #e9ecfc;
208-
// --ion-color-primary-foreground: #105cef;
209-
// ...
210-
// --ion-color-dark: #292929;
211-
// --ion-color-dark-rgb: 41, 41, 41;
212-
// --ion-color-dark-contrast: #ffffff;
213-
// --ion-color-dark-contrast-rgb: 255, 255, 255;
214-
// --ion-color-dark-shade: #242424;
215-
// --ion-color-dark-tint: #4e4e4e;
216-
// --ion-color-dark-foreground: #242424;
217-
// --ion-color-dark-subtle: #f5f5f5;
218-
// --ion-color-dark-subtle-rgb: 245, 245, 245;
219-
// --ion-color-dark-subtle-contrast: #292929;
220-
// --ion-color-dark-subtle-contrast-rgb: 41, 41, 41;
221-
// --ion-color-dark-subtle-shade: #e0e0e0;
222-
// --ion-color-dark-subtle-tint: #efefef;
223-
// --ion-color-dark-subtle-foreground: #242424;
224-
// }
225-
// --------------------------------------------------------------------------------------------
226-
@mixin generate-color-variables() {
227-
@if not($theme-colors) {
228-
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color().';
229-
}
230-
231-
@each $color-name, $value in $theme-colors {
232-
@each $hue in (bold, subtle) {
233-
$colors: map.get($value, $hue);
234-
235-
@if $colors != null {
236-
$prefix: if($hue == subtle, "-subtle", "");
237-
238-
--ion-color-#{$color-name}#{$prefix}: #{map.get($colors, base)};
239-
--ion-color-#{$color-name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
240-
--ion-color-#{$color-name}#{$prefix}-contrast: #{map.get($colors, contrast)};
241-
--ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
242-
--ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
243-
--ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
244-
// TODO(FW-6417): this "if" can be removed when foreground is defined for ios/md
245-
// themes. It should not be added until we want foreground to be required for
246-
// ios and md because this will be a breaking change, requiring users to add
247-
// `--ion-color-{color}-foreground` in order to override the default colors
248-
@if (map.get($colors, foreground)) {
249-
--ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
250-
}
251-
}
252-
}
253-
}
254-
}

‎core/src/themes/ionic/ionic.globals.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,3 @@
1616
// Default Theme
1717
@use "./ionic.theme.default" as ionicTheme;
1818
@forward "./ionic.theme.default";
19-
@include color.set-theme-colors(ionicTheme.$ionic-colors);

0 commit comments

Comments
 (0)