Skip to content

Commit c5aee9e

Browse files
simeonoffsimeonoff
authored
Merge pull request #8865 from IgniteUI/simeonoff/scoped-vars
refactor(themes): add scoped vars
2 parents 797907b + 131f96f commit c5aee9e

File tree

63 files changed

+210
-270
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+210
-270
lines changed

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

+7-3
Original file line numberDiff line numberDiff line change
@@ -531,9 +531,9 @@ $p-test: igx-palette(#fff, #000);
531531
@if map-has-key($map, $key) {
532532
@if not(legacy()) {
533533
@if not($fallback) {
534-
@return var(--#{map-get($map, 'name')}-#{$key})
534+
@return var(--#{$key})
535535
}
536-
@return var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})
536+
@return var(--#{$key}, #{$fallback})
537537
} @else {
538538
@return map-get($map, $key);
539539
}
@@ -849,7 +849,11 @@ $p-test: igx-palette(#fff, #000);
849849
@function str-replace($string, $search, $replace: '') {
850850
$index: str-index($string, $search);
851851
@if $index {
852-
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
852+
@return str-slice($string, 1, $index - 1) + $replace + str-replace(
853+
str-slice($string, $index + str-length($search)),
854+
$search,
855+
$replace
856+
);
853857
}
854858
@return $string;
855859
}

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

+19-46
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,6 @@
33
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
44
////
55

6-
/// Help debug sass maps.
7-
/// @access privet
8-
/// @example scss - Sample usage
9-
/// input[type="checkbox"] {
10-
/// @include hide-default();
11-
/// }
12-
13-
//@mixin debug-map($map) {
14-
// @at-root {
15-
// @debug-map {
16-
// __toString__: inspect($map);
17-
// __length__: length($map);
18-
// __keys__: map-keys($map);
19-
//
20-
// __properties__ {
21-
// @each $key, $value in $map {
22-
// #{$key}: inspect($value);
23-
// }
24-
// }
25-
// }
26-
// }
27-
//}
28-
296
/// Hides the element from the DOM.
307
/// @access public
318
/// @example scss - Sample usage
@@ -218,43 +195,39 @@
218195
/// @include css-vars-from-theme($my-theme);
219196
/// }
220197
@mixin css-vars-from-theme($theme, $prefix: null) {
198+
$name: map-get($theme, 'name');
199+
$ignore: ('name', 'palette', 'variant', 'selector');
200+
221201
@each $key, $value in $theme {
222-
@if $key != 'name' and $key != 'palette' and type-of($value) != 'map' {
202+
@if not(index($ignore, $key)) and type-of($value) != 'map' {
223203
@if $prefix {
224-
--#{$prefix}-#{$key}: #{$value};
204+
--#{$prefix}-#{$key}: var(--#{$name}-#{$key}, #{$value});
225205
} @else {
226-
--#{$key}: #{$value};
206+
--#{$key}: var(--#{$name}-#{$key}, #{$value});
227207
}
228208
}
229209
}
230210
}
231211

232-
/// Add theme colors to the global root scope
233-
/// Ensures the operation is done only once.
234-
/// @access private
235-
/// @param {map} $theme - The component theme to register as css vars.
236-
/// @requires {mixin} css-vars-from-theme
237-
@mixin igx-root-css-vars($theme) {
238-
$scope: &;
239-
240-
@if map-get($themes, $scope) == null {
241-
$id: unique-id();
242-
$themes: map-merge($themes, (#{$scope}: $id)) !global;
243-
@include igx-css-vars($theme);
244-
}
245-
}
246-
247212
/// Add theme colors to a scope.
248213
/// @access public
249214
/// @param {map} $theme - The component theme to be used
250215
/// @requires {mixin} css-vars-from-theme
251-
@mixin igx-css-vars($theme) {
252-
$scope: if(is-root(), ':root', '&');
253-
$prefix: map-get($theme, 'name');
216+
@mixin igx-css-vars($theme, $scope: null, $prefix: null) {
217+
$s: map-get($theme, 'selector');
218+
$n: map-get($theme, 'name');
219+
$name: if($scope, $scope, $s or $n);
254220

255221
@if not(legacy()) {
256-
#{$scope} {
257-
@include css-vars-from-theme($theme, $prefix);
222+
@if is-root() {
223+
#{$name} {
224+
@include css-vars-from-theme($theme, $prefix);
225+
}
226+
} @else {
227+
&,
228+
#{$name} {
229+
@include css-vars-from-theme($theme, $prefix);
230+
}
258231
}
259232
}
260233
}

‎projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,11 @@
6565
}
6666

6767
/// @param {Map} $theme - The theme used to style the component.
68-
/// @requires {mixin} igx-root-css-vars
68+
/// @requires {mixin} igx-css-vars
6969
/// @requires rem
7070
/// @requires --var
7171
@mixin igx-action-strip($theme) {
72-
@include igx-root-css-vars($theme);
72+
@include igx-css-vars($theme);
7373

7474
$padding: (
7575
comfortable: 0 rem(24px),

‎projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,11 @@
7777
}
7878

7979
/// @param {Map} $theme - The theme used to style the component.
80-
/// @requires {mixin} igx-root-css-vars
80+
/// @requires {mixin} igx-css-vars
8181
/// @requires rem
8282
/// @requires --var
8383
@mixin igx-avatar($theme) {
84-
@include igx-root-css-vars($theme);
84+
@include igx-css-vars($theme);
8585

8686
$small-size: 40px;
8787
$medium-size: 64px;

‎projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
/// // Theming using css variables (not supported in IE11):
3939
/// @include igx-css-vars($my-badge-theme);
4040
@function igx-badge-theme(
41-
$palette: $default-palette,
41+
$palette: null,
4242
$schema: $light-schema,
4343
$elevations: $elevations,
4444
@@ -94,12 +94,12 @@
9494
}
9595

9696
/// @param {Map} $theme - The theme used to style the component.
97-
/// @requires {mixin} igx-root-css-vars
97+
/// @requires {mixin} igx-css-vars
9898
/// @requires igx-color
9999
/// @requires rem
100100
/// @requires --var
101101
@mixin igx-badge($theme) {
102-
@include igx-root-css-vars($theme);
102+
@include igx-css-vars($theme);
103103

104104
$palette: map-get($theme, 'palette');
105105

‎projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@
5858
}
5959

6060
/// @param {Map} $theme - The theme used to style the component.
61-
/// @requires {mixin} igx-root-css-vars
61+
/// @requires {mixin} igx-css-vars
6262
/// @requires rem
6363
/// @requires --var
6464
@mixin igx-banner($theme) {
65-
@include igx-root-css-vars($theme);
65+
@include igx-css-vars($theme);
6666

6767
$left: if-ltr(left, right);
6868
$right: if-ltr(right, left);

‎projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
}
7171

7272
/// @param {Map} $theme - The theme used to style the component.
73-
/// @requires {mixin} igx-root-css-vars
73+
/// @requires {mixin} igx-css-vars
7474
/// @requires {mixin} ellipsis
7575
/// @requires igx-bottom-nav-theme
7676
/// @requires igx-color
@@ -79,7 +79,7 @@
7979
/// @requires $ease-in-out-quad
8080
/// @requires --var
8181
@mixin igx-bottom-nav($theme) {
82-
@include igx-root-css-vars($theme);
82+
@include igx-css-vars($theme);
8383

8484
$menu-height: 56px;
8585
$item-min-width: 80px;

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@
7474
$selected-shadow-color: null
7575
) {
7676
$name: 'igx-button-group';
77+
$selector: 'igx-buttongroup';
78+
7779
$button-group-schema: ();
7880

7981
@if map-has-key($schema, $name) {
@@ -145,6 +147,7 @@
145147

146148
@return extend($theme, (
147149
name: $name,
150+
selector: $selector,
148151
palette: $palette,
149152
item-text-color: $item-text-color,
150153
item-background: $item-background,
@@ -168,11 +171,11 @@
168171

169172

170173
/// @param {Map} $theme - The theme used to style the component.
171-
/// @requires {mixin} igx-root-css-vars
174+
/// @requires {mixin} igx-css-vars
172175
/// @requires igx-color
173176
/// @requires --var
174177
@mixin igx-button-group($theme) {
175-
@include igx-root-css-vars($theme);
178+
@include igx-css-vars($theme);
176179
$group-item-min-width: 24px;
177180
$group-item-border-thickness: 1px;
178181
$group-items-margin: rem(10px, 16px);

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,8 @@
171171
$disabled-background: null,
172172
) {
173173
$name: 'igx-button';
174+
$selector: '[igxButton]';
175+
174176
$button-schema: ();
175177

176178
@if map-has-key($schema, $name) {
@@ -335,6 +337,7 @@
335337

336338
@return extend($theme, (
337339
name: $name,
340+
selector: $selector,
338341
palette: $palette,
339342

340343
flat-border-radius: $flat-border-radius,
@@ -409,11 +412,11 @@
409412
}
410413

411414
/// @param {Map} $theme - The theme used to style the component.
412-
/// @requires {mixin} igx-root-css-vars
415+
/// @requires {mixin} igx-css-vars
413416
/// @requires rem
414417
/// @requires --var
415418
@mixin igx-button($theme) {
416-
@include igx-root-css-vars($theme);
419+
@include igx-css-vars($theme);
417420

418421
$left: if-ltr(left, right);
419422
$right: if-ltr(right, left);

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -322,13 +322,13 @@
322322

323323
/// @param {Map} $theme - The theme used to style the component.
324324
/// @requires {function} text-contrast
325-
/// @requires {mixin} igx-root-css-vars
325+
/// @requires {mixin} igx-css-vars
326326
/// @requires em
327327
/// @requires rem
328328
/// @requires {mixin} ellipsis
329329
/// @requires --var
330330
@mixin igx-calendar($theme) {
331-
@include igx-root-css-vars($theme);
331+
@include igx-css-vars($theme);
332332

333333
$palette: map-get($theme, 'palette');
334334
$cal-header-year-margin: 0;

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,11 @@
115115

116116
/// Card Component
117117
/// @param {Map} $theme - The theme used to style the component.
118-
/// @requires {mixin} igx-root-css-vars
118+
/// @requires {mixin} igx-css-vars
119119
/// @requires em
120120
/// @requires --var
121121
@mixin igx-card($theme) {
122-
@include igx-root-css-vars($theme);
122+
@include igx-css-vars($theme);
123123

124124
$variant: map-get($theme, 'variant');
125125
$not-material-theme: $variant != 'material';

‎projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
}
118118

119119
/// @param {Map} $theme - The theme used to style the component.
120-
/// @requires {mixin} igx-root-css-vars
120+
/// @requires {mixin} igx-css-vars
121121
/// @requires igx-color
122122
/// @requires igx-elevation
123123
/// @requires $elevations
@@ -126,7 +126,7 @@
126126
/// @requires {mixin} scale-out-center
127127
/// @requires --var
128128
@mixin igx-carousel($theme) {
129-
@include igx-root-css-vars($theme);
129+
@include igx-css-vars($theme);
130130

131131
$left: if-ltr(left, right);
132132
$right: if-ltr(right, left);

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss

+8-6
Original file line numberDiff line numberDiff line change
@@ -287,10 +287,12 @@
287287
$y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style);
288288
$y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style);
289289

290-
@include igx-font-var('title-text-style', $title-styles, $name);
291-
@include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
292-
@include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
293-
@include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
294-
@include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
295-
@include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
290+
igx-category-chart {
291+
@include igx-font-var('title-text-style', $title-styles, $name);
292+
@include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
293+
@include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
294+
@include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
295+
@include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
296+
@include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
297+
}
296298
}

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,9 @@
114114
$title-styles: igx-type-scale-category($type-scale, $title);
115115
$subtitle-styles: igx-type-scale-category($type-scale, $subtitle);
116116

117-
@include igx-font-var('title-text-style', $title-styles, $name);
118-
@include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
117+
igx-data-chart {
118+
@include igx-font-var('title-text-style', $title-styles, $name);
119+
@include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
120+
}
119121
}
120122

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss

+8-6
Original file line numberDiff line numberDiff line change
@@ -279,11 +279,13 @@
279279
$y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style);
280280
$y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style);
281281

282-
@include igx-font-var('title-text-style', $title-styles, $name);
283-
@include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
284-
@include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
285-
@include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
286-
@include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
287-
@include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
282+
igx-financial-chart {
283+
@include igx-font-var('title-text-style', $title-styles, $name);
284+
@include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
285+
@include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
286+
@include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
287+
@include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
288+
@include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
289+
}
288290
}
289291

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,9 @@
7070
$outer-label: igx-type-scale-category($type-scale, $outer-label-text-style);
7171
$text: igx-type-scale-category($type-scale, $text-style);
7272

73-
@include igx-font-var('outer-label-text-style', $outer-label, $name);
74-
@include igx-font-var('text-style', $text, $name);
73+
igx-funnel-chart {
74+
@include igx-font-var('outer-label-text-style', $outer-label, $name);
75+
@include igx-font-var('text-style', $text, $name);
76+
}
7577
}
7678

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,12 @@
119119
/// @group typography
120120
/// @requires {mixin} igx-type-style
121121
@mixin igx-gauge-typography() {
122-
$scope: if(is-root(), ':root', '&');
122+
igx-linear-gauge {
123+
--linear-gauge-font: var(--igx-font-family, inherit);
124+
}
123125

124-
#{$scope} {
125-
@include css-vars-from-theme((font: inherit), 'linear-gauge');
126-
@include css-vars-from-theme((font: inherit), 'radial-gauge');
126+
igx-radial-gauge {
127+
--radial-gauge-font: var(--igx-font-family, inherit);
127128
}
128129
}
129130

0 commit comments

Comments
 (0)